@itwin/itwinui-css 0.63.1 → 1.0.0-dev.2

package/css/button.css

@@ -3,50 +3,45 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-button{
-  --_iui-button-active-stripe-inset:initial;
-  --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
   margin:0;
   padding:0;
   border:none;
   vertical-align:baseline;
   font-family:inherit;
   display:inline-flex;
+  flex-shrink:0;
   align-items:center;
   vertical-align:middle;
   justify-content:center;
   position:relative;
-  box-sizing:border-box;
-  border-radius:4px;
-  line-height:22px;
-  box-shadow:none;
-  font-size:14px;
-  font-weight:400;
-  text-decoration:none;
+  border-radius:var(--iui-border-radius-1);
+  line-height:var(--iui-size-l);
+  font-size:var(--iui-font-size-1);
+  font-weight:var(--iui-font-weight-normal);
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
   cursor:pointer;
   white-space:nowrap;
-  border:1px solid transparent;
-  color:rgba(0, 0, 0, 0.8);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  border:1px solid var(--_iui-button-border-color);
+  background:var(--_iui-button-background-color);
   color:var(--_iui-button-text-color);
-  padding:0 16px;
-  height:38px;
-  gap:8px;
-  padding:0 16px;
-  height:38px;
-  gap:8px;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-button{
-    transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
-  }
-}
-.iui-button:hover{
-  --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
+  gap:var(--_iui-button-gap);
+  min-height:var(--_iui-button-min-height);
+  min-width:var(--_iui-button-min-height);
+  padding-block:var(--_iui-button-padding-block);
+  padding-inline:var(--_iui-button-padding-inline);
+  transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
+  -webkit-tap-highlight-color:transparent;
   text-decoration:none;
+  --_iui-button-gap:var(--iui-size-xs);
+  --_iui-button-padding-block:var(--iui-size-2xs);
+  --_iui-button-padding-inline:var(--iui-size-m);
+  --_iui-button-min-height:var(--iui-component-height);
+  --_iui-button-text-color:var(--iui-color-foreground-2);
+  --_iui-button-background-color:var(--iui-color-background-1);
+  --_iui-button-border-color:var(--iui-color-foreground-4);
 }
 .iui-button:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -58,435 +53,333 @@
     outline-offset:-1px;
   }
 }
-.iui-button[disabled], .iui-button:disabled{
+.iui-button:hover, .iui-button:active{
+  --_iui-button-text-color:var(--iui-color-foreground-1);
+  --_iui-button-background-color:var(--iui-color-background-1-hover);
+  --_iui-button-border-color:var(--iui-color-foreground-1);
+}
+.iui-button:hover .iui-notification-primary::before,
+.iui-button:hover .iui-notification-positive::before,
+.iui-button:hover .iui-notification-warning::before,
+.iui-button:hover .iui-notification-negative::before, .iui-button:active .iui-notification-primary::before,
+.iui-button:active .iui-notification-positive::before,
+.iui-button:active .iui-notification-warning::before,
+.iui-button:active .iui-notification-negative::before{
+  border-color:var(--iui-color-background-1-hover);
+}
+.iui-button:focus{
+  outline-offset:-2px;
+  outline-width:2px;
+}
+.iui-button[disabled], .iui-button:disabled, .iui-button[aria-disabled=true]{
+  --_iui-button-text-color:var(--iui-color-foreground-5);
+  --_iui-button-background-color:var(--iui-color-background-disabled);
+  --_iui-button-border-color:var(--iui-color-background-disabled);
   cursor:not-allowed;
-  background:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-}
-.iui-button.iui-active::after{
+  outline-offset:-1px;
+  outline-width:1px;
+  outline-color:var(--iui-color-foreground-primary);
+}
+.iui-button[data-iui-size=small]{
+  --_iui-button-gap:var(--iui-size-2xs);
+  --_iui-button-padding-block:0;
+  --_iui-button-padding-inline:var(--iui-size-xs);
+  --_iui-button-min-height:var(--iui-component-height-small);
+}
+.iui-button[data-iui-size=large]{
+  font-size:var(--iui-font-size-2);
+  --_iui-button-gap:var(--iui-size-s);
+  --_iui-button-padding-block:var(--iui-size-xs);
+  --_iui-button-padding-inline:var(--iui-size-l);
+  --_iui-button-min-height:var(--iui-component-height-large);
+}
+.iui-button[data-iui-variant=borderless]{
+  --_iui-button-text-color:var(--iui-color-foreground-2);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
+  --_iui-button-gap:var(--iui-size-xs);
+  --_iui-button-padding-block:var(--iui-size-2xs);
+  --_iui-button-padding-inline:var(--iui-size-m);
+  --_iui-button-min-height:var(--iui-component-height);
+  --_iui-button-padding-inline:var(--iui-size-xs);
+}
+.iui-button[data-iui-variant=borderless]:where(:hover, :active){
+  --_iui-button-text-color:var(--iui-color-foreground-1);
+  --_iui-button-background-color:var(--iui-color-background-transparent-hover);
+}
+.iui-button[data-iui-variant=borderless]:where(:focus){
+  outline-offset:-1px;
+  outline-width:1px;
+}
+.iui-button[data-iui-variant=borderless]:where([disabled], :disabled, [aria-disabled="true"]){
+  --_iui-button-text-color:var(--iui-color-foreground-5);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
+}
+.iui-button[data-iui-variant=borderless][data-iui-size=small]{
+  --_iui-button-gap:var(--iui-size-2xs);
+  --_iui-button-padding-block:0;
+  --_iui-button-padding-inline:var(--iui-size-xs);
+  --_iui-button-min-height:var(--iui-component-height-small);
+  --_iui-button-padding-inline:var(--iui-size-2xs);
+}
+.iui-button[data-iui-variant=borderless][data-iui-size=large]{
+  font-size:var(--iui-font-size-2);
+  --_iui-button-gap:var(--iui-size-s);
+  --_iui-button-padding-block:var(--iui-size-xs);
+  --_iui-button-padding-inline:var(--iui-size-l);
+  --_iui-button-min-height:var(--iui-component-height-large);
+  --_iui-button-padding-inline:var(--iui-size-s);
+}
+.iui-button[data-iui-active=true]{
+  --_iui-button-active-stripe-inset:initial;
+  --_iui-button-active-stripe-color:var(--iui-color-foreground-primary);
+  --_iui-button-text-color:var(--iui-color-foreground-primary);
+  --_iui-button-background-color:var(--iui-color-background-subtle-primary);
+}
+.iui-button[data-iui-active=true]::after{
   content:"";
   position:absolute;
   inset:var(--_iui-button-active-stripe-inset);
-  background-color:var(--iui-color-foreground-primary);
+  background-color:var(--_iui-button-active-stripe-color);
 }
-.iui-button.iui-active[disabled]::after, .iui-button.iui-active:disabled::after{
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+.iui-button[data-iui-active=true][disabled], .iui-button[data-iui-active=true]:disabled, .iui-button[data-iui-active=true][aria-disabled=true]{
+  --_iui-button-active-stripe-color:var(--iui-color-foreground-5);
+  --_iui-button-text-color:var(--iui-color-foreground-5);
 }
-.iui-button.iui-default{
-  background-color:white;
-  border-color:rgba(0, 0, 0, 0.4);
-  background-color:var(--iui-color-background-1);
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+.iui-button[data-iui-active=true][data-iui-variant=borderless]{
+  --_iui-button-background-color:hsl(var(--iui-color-foreground-primary-hsl) / var(--iui-opacity-6));
 }
-.iui-button.iui-default:focus-visible{
-  outline:2px solid var(--iui-color-foreground-primary);
-  outline-offset:-2px;
+.iui-button[data-iui-active=true][disabled], .iui-button[data-iui-active=true]:disabled, .iui-button[data-iui-active=true][aria-disabled=true]{
+  --_iui-button-background-color:var(--iui-color-background-disabled);
 }
-@supports not selector(*:focus-visible){
-  .iui-button.iui-default:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
-    outline-offset:-2px;
-  }
+.iui-button[data-iui-variant=high-visibility]{
+  --_iui-button-background-color:var(--iui-color-background-primary);
+  --_iui-button-text-color:var(--iui-color-foreground-accessory);
+  --_iui-button-border-color:var(--_iui-button-background-color);
 }
-.iui-button.iui-default:hover, .iui-button.iui-default:active{
-  background-color:#f2f2f2;
-  border-color:black;
-  background-color:var(--iui-color-background-1-overlay);
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
+.iui-button[data-iui-variant=high-visibility]:hover, .iui-button[data-iui-variant=high-visibility]:active{
+  --_iui-button-background-color:var(--iui-color-background-primary-hover);
 }
-.iui-button.iui-default:hover .iui-notification-primary::before,
-.iui-button.iui-default:hover .iui-notification-positive::before,
-.iui-button.iui-default:hover .iui-notification-warning::before,
-.iui-button.iui-default:hover .iui-notification-negative::before, .iui-button.iui-default:active .iui-notification-primary::before,
-.iui-button.iui-default:active .iui-notification-positive::before,
-.iui-button.iui-default:active .iui-notification-warning::before,
-.iui-button.iui-default:active .iui-notification-negative::before{
-  border-color:#f2f2f2;
-  border-color:var(--iui-color-background-1-overlay);
+.iui-button[data-iui-variant=high-visibility]:focus{
+  outline-color:var(--iui-color-foreground-accessory);
+  outline-offset:-3px;
+  outline-width:1px;
 }
-.iui-button.iui-default.iui-dropdown{
-  padding-right:8px;
+.iui-button[data-iui-variant=high-visibility][disabled], .iui-button[data-iui-variant=high-visibility]:disabled, .iui-button[data-iui-variant=high-visibility][aria-disabled=true]{
+  --_iui-button-background-color:var(--iui-color-background-disabled);
+  --_iui-button-text-color:var(--iui-color-foreground-5);
+  outline-offset:-1px;
+  outline-width:1px;
+  outline-color:var(--iui-color-foreground-primary);
 }
-.iui-button.iui-default.iui-dropdown.iui-small{
-  padding-right:4px;
+.iui-button[data-iui-variant=cta]{
+  --_iui-button-background-color:var(--iui-color-background-positive);
+  --_iui-button-text-color:var(--iui-color-foreground-accessory);
+  --_iui-button-border-color:var(--_iui-button-background-color);
 }
-.iui-button.iui-default.iui-dropdown.iui-large{
-  padding-right:12px;
+.iui-button[data-iui-variant=cta]:hover, .iui-button[data-iui-variant=cta]:active{
+  --_iui-button-background-color:var(--iui-color-background-positive-hover);
 }
-.iui-button.iui-default.iui-active:enabled{
-  position:relative;
-  color:#008ae0;
-  color:var(--iui-color-foreground-primary);
+.iui-button[data-iui-variant=cta]:focus{
+  outline-color:var(--iui-color-foreground-accessory);
+  outline-offset:-3px;
+  outline-width:1px;
 }
-.iui-button.iui-default.iui-active:enabled::before{
-  content:"";
-  position:absolute;
-  inset:0;
-  background-color:rgba(0, 138, 224, 0.1);
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+.iui-button[data-iui-variant=cta][disabled], .iui-button[data-iui-variant=cta]:disabled, .iui-button[data-iui-variant=cta][aria-disabled=true]{
+  --_iui-button-background-color:var(--iui-color-background-disabled);
+  --_iui-button-text-color:var(--iui-color-foreground-5);
+  outline-offset:-1px;
+  outline-width:1px;
+  outline-color:var(--iui-color-foreground-primary);
 }
-.iui-button.iui-default[disabled], .iui-button.iui-default:disabled{
-  cursor:not-allowed;
-  background:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-}
-.iui-button.iui-high-visibility{
+.iui-button[data-iui-variant=idea]{
+  --_iui-button-background-color:var(--iui-color-background-primary);
   --_iui-button-text-color:var(--iui-color-foreground-accessory);
-  background-color:#008ae0;
-  border-color:#008ae0;
-  color:white;
-  background-color:var(--iui-color-background-primary);
-  border-color:var(--iui-color-background-primary);
-  color:var(--iui-color-foreground-accessory);
-  color:var(--_iui-button-text-color);
+  --_iui-button-border-color:var(--_iui-button-background-color);
+  border-radius:var(--iui-border-radius-round);
+  box-shadow:var(--iui-shadow-5);
+  position:fixed;
+  bottom:var(--iui-size-s);
+  right:var(--iui-size-m);
+}
+.iui-button[data-iui-variant=idea]:hover, .iui-button[data-iui-variant=idea]:active{
+  --_iui-button-background-color:var(--iui-color-background-primary-hover);
 }
-.iui-button.iui-high-visibility:focus-visible{
-  outline:1px solid var(--iui-color-foreground-accessory);
+.iui-button[data-iui-variant=idea]:focus{
+  outline-color:var(--iui-color-foreground-accessory);
   outline-offset:-3px;
+  outline-width:1px;
 }
-@supports not selector(*:focus-visible){
-  .iui-button.iui-high-visibility:focus{
-    outline:1px solid var(--iui-color-foreground-accessory);
-    outline-offset:-3px;
-  }
+.iui-button[data-iui-variant=idea][disabled], .iui-button[data-iui-variant=idea]:disabled, .iui-button[data-iui-variant=idea][aria-disabled=true]{
+  --_iui-button-background-color:var(--iui-color-background-disabled);
+  --_iui-button-text-color:var(--iui-color-foreground-5);
+  outline-offset:-1px;
+  outline-width:1px;
+  outline-color:var(--iui-color-foreground-primary);
 }
-.iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active{
-  background-color:#006bad;
-  border-color:#006bad;
-  background-color:var(--iui-color-background-primary-overlay);
-  border-color:var(--iui-color-background-primary-overlay);
+
+.iui-button-icon{
+  display:flex;
+  flex-shrink:0;
+  width:var(--iui-size-m);
+  height:var(--iui-size-m);
+  transition:fill var(--iui-duration-1) ease-out;
+  fill:currentColor;
+  margin-block:var(--iui-size-2xs);
 }
-.iui-button.iui-high-visibility[disabled], .iui-button.iui-high-visibility:disabled{
-  cursor:not-allowed;
-  background:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-}
-.iui-button.iui-cta{
-  --_iui-button-text-color:var(--iui-color-foreground-accessory);
-  background-color:#53a21a;
-  border-color:#53a21a;
-  color:white;
-  background-color:var(--iui-color-background-positive);
-  border-color:var(--iui-color-background-positive);
-  color:var(--iui-color-foreground-accessory);
-  color:var(--_iui-button-text-color);
+
+.iui-button-dropdown{
+  padding-right:calc(var(--iui-size-xs) - 1px);
 }
-.iui-button.iui-cta:focus-visible{
-  outline:1px solid var(--iui-color-foreground-accessory);
-  outline-offset:-3px;
+.iui-button-dropdown[data-iui-size=small]{
+  padding-right:calc(var(--iui-size-2xs) - 1px);
 }
-@supports not selector(*:focus-visible){
-  .iui-button.iui-cta:focus{
-    outline:1px solid var(--iui-color-foreground-accessory);
-    outline-offset:-3px;
-  }
+.iui-button-dropdown[data-iui-size=large]{
+  padding-right:calc(var(--iui-size-s) - 1px);
+}
+
+.iui-button-split{
+  display:inline-flex;
+  align-items:center;
+  isolation:isolate;
 }
-.iui-button.iui-cta:hover, .iui-button.iui-cta:active{
-  background-color:#3d7613;
-  border-color:#3d7613;
-  background-color:var(--iui-color-background-positive-overlay);
-  border-color:var(--iui-color-background-positive-overlay);
+.iui-button-split :where(.iui-button:first-child){
+  border-top-right-radius:0;
+  border-bottom-right-radius:0;
 }
-.iui-button.iui-cta[disabled], .iui-button.iui-cta:disabled{
-  cursor:not-allowed;
-  background:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-}
-.iui-button.iui-idea{
-  --_iui-button-text-color:var(--iui-color-foreground-accessory);
-  background-color:#008ae0;
-  border-color:#008ae0;
-  color:white;
-  background-color:var(--iui-color-background-primary);
-  border-color:var(--iui-color-background-primary);
-  color:var(--iui-color-foreground-accessory);
-  color:var(--_iui-button-text-color);
-  border-radius:22px;
-  box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
-  position:fixed;
-  bottom:11px;
-  right:16px;
+.iui-button-split :where(.iui-button:first-child)[data-iui-variant=high-visibility], .iui-button-split :where(.iui-button:first-child)[data-iui-variant=cta]{
+  border-right-color:rgba(255, 255, 255, var(--iui-opacity-4));
 }
-.iui-button.iui-idea:focus-visible{
-  outline:1px solid var(--iui-color-foreground-accessory);
-  outline-offset:-3px;
+.iui-button-split :where(.iui-button:first-child):hover{
+  z-index:1;
 }
-@supports not selector(*:focus-visible){
-  .iui-button.iui-idea:focus{
-    outline:1px solid var(--iui-color-foreground-accessory);
-    outline-offset:-3px;
-  }
+.iui-button-split :where(.iui-button:first-child)[disabled], .iui-button-split :where(.iui-button:first-child):disabled, .iui-button-split :where(.iui-button:first-child)[aria-disabled=true]{
+  border-right-color:var(--iui-color-background-4);
+  z-index:-1;
 }
-.iui-button.iui-idea:hover, .iui-button.iui-idea:active{
-  background-color:#006bad;
-  border-color:#006bad;
-  background-color:var(--iui-color-background-primary-overlay);
-  border-color:var(--iui-color-background-primary-overlay);
+.iui-button-split :where(.iui-button:last-child){
+  --_iui-button-padding-inline:var(--iui-size-2xs);
+  border-top-left-radius:0;
+  border-bottom-left-radius:0;
+  margin-left:-1px;
+  min-width:unset;
 }
-.iui-button.iui-idea[disabled], .iui-button.iui-idea:disabled{
-  cursor:not-allowed;
-  background:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-}
-.iui-button.iui-borderless{
-  border-color:transparent;
-  background-color:transparent;
-  padding:0 8px;
-  height:38px;
-  gap:8px;
-}
-.iui-button.iui-borderless > .iui-button-icon:only-child{
-  margin-left:3px;
-  margin-right:3px;
-}
-.iui-button.iui-borderless:hover{
-  background-color:rgba(0, 0, 0, 0.1);
-  border-color:transparent;
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-  border-color:transparent;
-}
-.iui-button.iui-borderless.iui-active{
-  background-color:rgba(0, 138, 224, 0.1);
-  color:#008ae0;
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-  color:var(--iui-color-foreground-primary);
-  border-color:transparent;
-}
-.iui-button.iui-borderless[disabled], .iui-button.iui-borderless:disabled{
-  cursor:not-allowed;
-  background:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-  background-color:transparent;
-  border-color:transparent;
-  background-color:transparent;
-  border-color:transparent;
-}
-.iui-button.iui-borderless[disabled].iui-active, .iui-button.iui-borderless:disabled.iui-active{
-  background-color:rgba(0, 0, 0, 0.05);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
-}
-.iui-button.iui-small{
-  padding:0 8px;
-  height:27px;
-  gap:4px;
-}
-.iui-button.iui-small.iui-borderless{
-  padding:0 2px;
-  height:27px;
-  gap:4px;
-}
-.iui-button.iui-large{
-  padding:0 24px;
-  height:49px;
-  font-size:16px;
-  gap:12px;
-}
-.iui-button.iui-large.iui-borderless{
-  padding:0 12px;
-  height:49px;
-  font-size:16px;
-  gap:12px;
+.iui-button-split :where(.iui-button:last-child)[data-iui-variant=high-visibility], .iui-button-split :where(.iui-button:last-child)[data-iui-variant=cta]{
+  border-left-color:rgba(255, 255, 255, var(--iui-opacity-4));
+}
+.iui-button-split :where(.iui-button:last-child)[disabled], .iui-button-split :where(.iui-button:last-child):disabled, .iui-button-split :where(.iui-button:last-child)[aria-disabled=true]{
+  border-left-color:var(--iui-color-background-4);
+  z-index:-1;
+}
+.iui-button-split :where(.iui-button:last-child)[data-iui-size=small]{
+  --_iui-button-padding-inline:var(--iui-size-3xs);
+}
+.iui-button-split :where(.iui-button:last-child)[data-iui-size=large]{
+  --_iui-button-padding-inline:var(--iui-size-xs);
 }
 
 .iui-button-group{
   display:inline-flex;
   align-items:center;
   isolation:isolate;
+  pointer-events:none;
 }
 .iui-button-group > *{
   display:flex;
 }
+.iui-button-group > * > *{
+  pointer-events:all;
+}
 .iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
   position:relative;
-  --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px);
+  --_iui-button-active-stripe-inset:var(--iui-size-3xs)
+    var(--iui-size-3xs)
+    calc(100% - var(--iui-size-2xs));
 }
 .iui-button-group > * .iui-input-container:hover, .iui-button-group > * .iui-button:hover, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
   z-index:1;
 }
-.iui-button-group > * .iui-input-container:focus, .iui-button-group > * .iui-input-container:focus-within, .iui-button-group > * .iui-button:focus, .iui-button-group > * .iui-button:focus-within, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
-  z-index:2;
-}
 .iui-button-group > * .iui-input-container:disabled, .iui-button-group > * .iui-input-container.iui-disabled, .iui-button-group > * .iui-input-container[aria-disabled=true], .iui-button-group > * .iui-button:disabled, .iui-button-group > * .iui-button.iui-disabled, .iui-button-group > * .iui-button[aria-disabled=true], .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
   z-index:-1;
 }
-.iui-button-group > * .iui-input, .iui-button-group > * .iui-button:where(:not(.iui-borderless)){
+.iui-button-group > * .iui-input-container:focus, .iui-button-group > * .iui-input-container:focus:where([aria-disabled="true"]), .iui-button-group > * .iui-input-container:focus-within, .iui-button-group > * .iui-input-container:focus-within:where([aria-disabled="true"]), .iui-button-group > * .iui-button:focus, .iui-button-group > * .iui-button:focus:where([aria-disabled="true"]), .iui-button-group > * .iui-button:focus-within, .iui-button-group > * .iui-button:focus-within:where([aria-disabled="true"]), .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus:where([aria-disabled="true"]), .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within:where([aria-disabled="true"]){
+  z-index:2;
+}
+.iui-button-group > * .iui-input, .iui-button-group > * .iui-button:where(:not([data-iui-variant="borderless"])){
   border-radius:0;
   transition-duration:0ms;
 }
-.iui-button-group > * .iui-input:hover, .iui-button-group > * .iui-input:focus, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):focus{
-  transition-duration:0.2s;
+.iui-button-group > * .iui-input:hover, .iui-button-group > * .iui-input:focus, .iui-button-group > * .iui-button:where(:not([data-iui-variant="borderless"])):hover, .iui-button-group > * .iui-button:where(:not([data-iui-variant="borderless"])):focus{
+  transition-duration:var(--iui-duration-1);
 }
-.iui-button-group > *:first-child .iui-input, .iui-button-group > *:first-child .iui-button:where(:not(.iui-borderless)){
-  border-top-left-radius:4px;
-  border-bottom-left-radius:4px;
+.iui-button-group > *:first-child .iui-input, .iui-button-group > *:first-child .iui-button:where(:not([data-iui-variant="borderless"])){
+  border-top-left-radius:var(--iui-border-radius-1);
+  border-bottom-left-radius:var(--iui-border-radius-1);
 }
-.iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not(.iui-borderless)){
-  border-bottom-right-radius:4px;
-  border-top-right-radius:4px;
+.iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not([data-iui-variant="borderless"])){
+  border-bottom-right-radius:var(--iui-border-radius-1);
+  border-top-right-radius:var(--iui-border-radius-1);
 }
 .iui-button-group > * + *{
   margin-left:-1px;
 }
-.iui-button-group > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
+.iui-button-group > *:not(:first-child) :not([data-iui-variant=borderless]):disabled, .iui-button-group > *:not(:first-child) :not([data-iui-variant=borderless]).iui-disabled, .iui-button-group > *:not(:first-child) :not([data-iui-variant=borderless])[aria-disabled=true]{
   border-left-color:var(--iui-color-background-4);
 }
+
 .iui-button-group-vertical{
   display:inline-flex;
   align-items:center;
   isolation:isolate;
+  pointer-events:none;
   flex-direction:column;
   max-height:100%;
 }
 .iui-button-group-vertical > *{
   display:flex;
 }
+.iui-button-group-vertical > * > *{
+  pointer-events:all;
+}
 .iui-button-group-vertical > * .iui-input-container, .iui-button-group-vertical > * .iui-button, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)){
   position:relative;
-  --_iui-button-active-stripe-inset:2px calc(100% - 4px) 2px 2px;
+  --_iui-button-active-stripe-inset:var(--iui-size-3xs)
+    calc(100% - var(--iui-size-2xs))
+    var(--iui-size-3xs)
+    var(--iui-size-3xs);
 }
 .iui-button-group-vertical > * .iui-input-container:hover, .iui-button-group-vertical > * .iui-button:hover, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
   z-index:1;
 }
-.iui-button-group-vertical > * .iui-input-container:focus, .iui-button-group-vertical > * .iui-input-container:focus-within, .iui-button-group-vertical > * .iui-button:focus, .iui-button-group-vertical > * .iui-button:focus-within, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
-  z-index:2;
-}
 .iui-button-group-vertical > * .iui-input-container:disabled, .iui-button-group-vertical > * .iui-input-container.iui-disabled, .iui-button-group-vertical > * .iui-input-container[aria-disabled=true], .iui-button-group-vertical > * .iui-button:disabled, .iui-button-group-vertical > * .iui-button.iui-disabled, .iui-button-group-vertical > * .iui-button[aria-disabled=true], .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
   z-index:-1;
 }
-.iui-button-group-vertical > * .iui-input, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)){
+.iui-button-group-vertical > * .iui-input-container:focus, .iui-button-group-vertical > * .iui-input-container:focus:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-input-container:focus-within, .iui-button-group-vertical > * .iui-input-container:focus-within:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-button:focus, .iui-button-group-vertical > * .iui-button:focus:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-button:focus-within, .iui-button-group-vertical > * .iui-button:focus-within:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within:where([aria-disabled="true"]){
+  z-index:2;
+}
+.iui-button-group-vertical > * .iui-input, .iui-button-group-vertical > * .iui-button:where(:not([data-iui-variant="borderless"])){
   border-radius:0;
   transition-duration:0ms;
 }
-.iui-button-group-vertical > * .iui-input:hover, .iui-button-group-vertical > * .iui-input:focus, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)):focus{
-  transition-duration:0.2s;
+.iui-button-group-vertical > * .iui-input:hover, .iui-button-group-vertical > * .iui-input:focus, .iui-button-group-vertical > * .iui-button:where(:not([data-iui-variant="borderless"])):hover, .iui-button-group-vertical > * .iui-button:where(:not([data-iui-variant="borderless"])):focus{
+  transition-duration:var(--iui-duration-1);
 }
-.iui-button-group-vertical > *:first-child .iui-input, .iui-button-group-vertical > *:first-child .iui-button:where(:not(.iui-borderless)){
-  border-top-left-radius:4px;
-  border-top-right-radius:4px;
+.iui-button-group-vertical > *:first-child .iui-input, .iui-button-group-vertical > *:first-child .iui-button:where(:not([data-iui-variant="borderless"])){
+  border-top-left-radius:var(--iui-border-radius-1);
+  border-top-right-radius:var(--iui-border-radius-1);
 }
-.iui-button-group-vertical > *:last-child .iui-input, .iui-button-group-vertical > *:last-child .iui-button:where(:not(.iui-borderless)){
-  border-bottom-right-radius:4px;
-  border-bottom-left-radius:4px;
+.iui-button-group-vertical > *:last-child .iui-input, .iui-button-group-vertical > *:last-child .iui-button:where(:not([data-iui-variant="borderless"])){
+  border-bottom-right-radius:var(--iui-border-radius-1);
+  border-bottom-left-radius:var(--iui-border-radius-1);
 }
 .iui-button-group-vertical > * + *{
   margin-top:-1px;
 }
-.iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
+.iui-button-group-vertical > *:not(:first-child) :not([data-iui-variant=borderless]):disabled, .iui-button-group-vertical > *:not(:first-child) :not([data-iui-variant=borderless]).iui-disabled, .iui-button-group-vertical > *:not(:first-child) :not([data-iui-variant=borderless])[aria-disabled=true]{
   border-top-color:var(--iui-color-background-4);
 }
+
 .iui-button-group-overflow-x{
   width:100%;
-}
-
-.iui-button-split-menu{
-  display:inline-flex;
-  align-items:center;
-  isolation:isolate;
-}
-.iui-button-split-menu > *{
-  display:flex;
-}
-.iui-button-split-menu > * .iui-input-container, .iui-button-split-menu > * .iui-button, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)){
-  position:relative;
-  --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px);
-}
-.iui-button-split-menu > * .iui-input-container:hover, .iui-button-split-menu > * .iui-button:hover, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
-  z-index:1;
-}
-.iui-button-split-menu > * .iui-input-container:focus, .iui-button-split-menu > * .iui-input-container:focus-within, .iui-button-split-menu > * .iui-button:focus, .iui-button-split-menu > * .iui-button:focus-within, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
-  z-index:2;
-}
-.iui-button-split-menu > * .iui-input-container:disabled, .iui-button-split-menu > * .iui-input-container.iui-disabled, .iui-button-split-menu > * .iui-input-container[aria-disabled=true], .iui-button-split-menu > * .iui-button:disabled, .iui-button-split-menu > * .iui-button.iui-disabled, .iui-button-split-menu > * .iui-button[aria-disabled=true], .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
-  z-index:-1;
-}
-.iui-button-split-menu > * .iui-input, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)){
-  border-radius:0;
-  transition-duration:0ms;
-}
-.iui-button-split-menu > * .iui-input:hover, .iui-button-split-menu > * .iui-input:focus, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):focus{
-  transition-duration:0.2s;
-}
-.iui-button-split-menu > *:first-child .iui-input, .iui-button-split-menu > *:first-child .iui-button:where(:not(.iui-borderless)){
-  border-top-left-radius:4px;
-  border-bottom-left-radius:4px;
-}
-.iui-button-split-menu > *:last-child .iui-input, .iui-button-split-menu > *:last-child .iui-button:where(:not(.iui-borderless)){
-  border-bottom-right-radius:4px;
-  border-top-right-radius:4px;
-}
-.iui-button-split-menu > * + *{
-  margin-left:-1px;
-}
-.iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
-  border-left-color:var(--iui-color-background-4);
-}
-.iui-button-split-menu:hover{
-  background-color:rgba(0, 0, 0, 0.1);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-}
-.iui-button-split-menu > *:first-child > .iui-borderless:hover{
-  background-color:transparent;
-}
-.iui-button-split-menu > *:last-child > .iui-button{
-  padding:4px;
-}
-.iui-button-split-menu > *:last-child > .iui-small{
-  padding:2px;
-}
-.iui-button-split-menu > *:last-child > .iui-large{
-  padding:8px;
-}
-.iui-button-split-menu > *:first-child > .iui-high-visibility,
-.iui-button-split-menu > *:first-child > .iui-cta{
-  border-right-color:rgba(255, 255, 255, 0.4);
-  border-right-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
-}
-.iui-button-split-menu > *:last-child > .iui-high-visibility,
-.iui-button-split-menu > *:last-child > .iui-cta{
-  border-left-color:rgba(255, 255, 255, 0.4);
-  border-left-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
-}
-.iui-button-split-menu.iui-disabled{
-  background-color:transparent;
-  background-color:transparent;
-}
-.iui-button-split-menu[disabled], .iui-button-split-menu:disabled{
-  cursor:not-allowed;
-  background:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-}
-
-.iui-button-icon{
-  width:16px;
-  height:16px;
-  transition:fill 0.2s ease-out;
-  fill:currentColor;
 }