.button-base{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(var(--tw-ring-width) + var(--tw-ring-offset-width)) var(--tw-ring-color,currentColor);position:relative;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding-block:var(--padding-y);padding-inline:var(--padding-x);font-family:var(--font-sans);font-weight:600;color:var(--on-background);text-align:center;letter-spacing:var(--tracking-wide);appearance:unset;cursor:pointer;user-select:none;background-color:color-mix(in oklab,var(--background) var(--background-opacity,100%),transparent);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);&:where(.color-surface){--background:var(--palette-surface-container);--tw-ring-color:var(--palette-outline-variant);--on-background:var(--palette-on-surface-variant);&:where(.variant-text,.variant-outlined){--on-background:var(--palette-on-surface)}}&:where(.color-neutral){--background:var(--palette-inverse-surface);--tw-ring-color:var(--palette-outline-variant);--on-background:var(--palette-surface);&:where(.variant-text,.variant-outlined){--on-background:var(--palette-on-surface-variant)}}&:where(.color-primary){--background:var(--palette-primary);--tw-ring-color:var(--palette-primary);--on-background:var(--palette-on-primary);&:where(.variant-text,.variant-outlined,.variant-soft){--on-background:var(--palette-primary)}}&:where(.color-secondary){--background:var(--palette-secondary);--tw-ring-color:var(--palette-secondary);--on-background:var(--palette-on-secondary);&:where(.variant-text,.variant-outlined,.variant-soft){--on-background:var(--palette-secondary)}}&:where(.color-tertiary){--background:var(--palette-tertiary);--tw-ring-color:var(--palette-tertiary);--on-background:var(--palette-on-tertiary);&:where(.variant-text,.variant-outlined,.variant-soft){--on-background:var(--palette-tertiary)}}&:where(.color-error){--background:var(--palette-error);--tw-ring-color:var(--palette-error);--on-background:var(--palette-on-error);&:where(.variant-text,.variant-outlined,.variant-soft){--on-background:var(--palette-error)}}&:where(.color-success){--background:var(--palette-success);--tw-ring-color:var(--palette-success);--on-background:var(--palette-on-success);&:where(.variant-soft){--background:var(--palette-success-container)}&:where(.variant-text,.variant-outlined,.variant-soft){--on-background:var(--palette-success)}}&:where(.color-warning){--background:var(--palette-warning);--tw-ring-color:var(--palette-warning);--on-background:var(--palette-on-warning);&:where(.variant-text,.variant-outlined,.variant-soft){--on-background:var(--palette-warning)}}&:where(.color-info){--background:var(--palette-info);--tw-ring-color:var(--palette-info);--on-background:var(--palette-on-info);&:where(.variant-soft){--background:var(--palette-info-container)}&:where(.variant-text,.variant-outlined,.variant-soft){--on-background:var(--palette-info)}}&:where(.size-xs){--padding-y:var(--padding-y-input-sm);--padding-x:calc(var(--padding-x-input-sm) / 2);gap:calc(var(--gap-input-sm) / 2);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}&:where(.size-sm){--padding-y:var(--padding-y-input-sm);--padding-x:var(--padding-x-input-sm);gap:var(--gap-input-sm);font-size:var(--text-sm);line-height:var(
      --tw-leading,var(--text-sm--line-height)  
    )}&:where(.size-md){--padding-y:var(--padding-y-input-md);--padding-x:var(--padding-x-input-md);gap:var(--gap-input-md);font-size:var(--text-base);line-height:var(
      --tw-leading,var(--text-base--line-height)  
    )}&:where(.size-lg){--padding-y:var(--padding-y-input-lg);--padding-x:var(--padding-x-input-lg);gap:var(--gap-input-lg);font-size:var(--text-lg);line-height:var(
      --tw-leading,var(--text-lg--line-height)  
    )}&.variant-outlined{--tw-ring-width:1px;--tw-ring-opacity:100%;--tw-ring-offset-width:0px;--tw-ring-offset-color:#000}&.variant-soft{--background-opacity:40%}&.variant-filled{--background-opacity:100%;--button-shadow:var(--paper-shadow1);&:hover:not(:focus){--background-opacity:90%;--button-shadow:var(--paper-shadow2)}}&:focus-visible{outline:none}&:disabled{pointer-events:none;cursor:not-allowed;opacity:.27}&>svg{display:flex;flex-shrink:0;width:1em;height:1em}&.variant-outlined,&.variant-text{--background-opacity:2%;&:hover:not(:focus){--background-opacity:8%}}&:is(.is-selected,selected){&.variant-outlined,&.variant-text,&:hover:not(:focus){--background-opacity:16%}}}.button{align-items:center;justify-content:center;font-weight:600;&>svg{width:1em;height:1em}&.variant-outlined,&.variant-text{--background-opacity:2%;&:hover:not(:focus){--background-opacity:8%}}&:is(:focus,:focus-visible,:focus-within){--tw-ring-width:2px;--tw-ring-opacity:100%;--tw-ring-offset-width:1px;--tw-ring-offset-color:#000}}