/* buttons — translated from packages/styles/components/{button,close-button}.css (desktop md: values) */
.button{position:relative;isolation:isolate;display:inline-flex;height:2.25rem;width:fit-content;transform-origin:center;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-3xl);padding:0 1rem;font-size:var(--text-sm);line-height:var(--text-sm--line-height);font-weight:500;white-space:nowrap;outline:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform 250ms var(--ease-smooth),background-color 100ms var(--ease-out),box-shadow 100ms var(--ease-out);cursor:var(--cursor-interactive);background-color:transparent;color:currentColor;text-decoration:none}
.button:focus-visible{box-shadow:var(--ring-focus)}
.button:disabled,.button[aria-disabled="true"]{opacity:var(--disabled-opacity);cursor:var(--cursor-disabled);pointer-events:none}
.button[data-pending="true"]{pointer-events:none}
.button:active{transform:scale(.97)}
@media (hover:hover){.button:hover{text-decoration:none}}
.button svg:not([data-slot="spinner"] svg),.button .icon{pointer-events:none;margin:.25rem -.125rem;width:1rem;height:1rem;flex-shrink:0;align-self:center}
.button--sm{height:2rem;padding:0 .75rem}.button--sm:active{transform:scale(.98)}
.button--lg{height:2.5rem;font-size:var(--text-base);line-height:var(--text-base--line-height)}.button--lg:active{transform:scale(.96)}
.button--primary{}
.button--secondary{}
.button--tertiary{}
.button--ghost,.button--outline{}
.button--outline{border:1px solid var(--border)}
.button--danger{}
.button--danger-soft{}
.button--icon-only{width:2.25rem;padding:0}.button--icon-only.button--sm{width:2rem}.button--icon-only.button--lg{width:2.5rem}
.button--full-width{width:100%}
.close-button{position:relative;isolation:isolate;display:inline-flex;height:1.5rem;width:1.5rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-xl);padding:.25rem;user-select:none;cursor:var(--cursor-interactive);transition:transform 250ms var(--ease-out-quart),color 150ms var(--ease-out),background-color 100ms var(--ease-out),box-shadow 150ms var(--ease-out);background:var(--default);color:var(--muted)}
.close-button svg{pointer-events:none;width:1rem;height:1rem;flex-shrink:0}
.close-button:focus-visible{box-shadow:var(--ring-focus);outline:none}
@media (hover:hover){.close-button:hover{background:var(--default-hover)}}
.close-button:active{transform:scale(.93)}
.close-button:disabled{opacity:var(--disabled-opacity);pointer-events:none}
.button-group{display:inline-flex;height:auto;align-items:center;justify-content:center;gap:0}
.button-group--horizontal{flex-direction:row}.button-group--vertical{flex-direction:column}
.button-group .button{border-radius:0}
.button-group--horizontal .button:first-child{border-start-start-radius:var(--radius-3xl);border-end-start-radius:var(--radius-3xl)}
.button-group--horizontal .button:last-child{border-start-end-radius:var(--radius-3xl);border-end-end-radius:var(--radius-3xl)}
.button-group--vertical .button:first-child{border-top-left-radius:var(--radius-3xl);border-top-right-radius:var(--radius-3xl)}
.button-group--vertical .button:last-child{border-bottom-left-radius:var(--radius-3xl);border-bottom-right-radius:var(--radius-3xl)}
.button-group .button:active{transform:none}
.button-group .button:focus-visible{z-index:10}
.button-group__separator{border-radius:var(--radius-sm);background:currentColor;opacity:.15;position:absolute;pointer-events:none;transition:opacity 150ms var(--ease-smooth)}
.button-group--horizontal .button-group__separator{inset-inline-start:-1px;top:25%;width:1px;height:50%}
.button-group--vertical .button-group__separator{inset-inline-start:25%;top:-1px;width:50%;height:1px}
.button-group--horizontal .button--outline:first-child{border-inline-end-width:0}.button-group--horizontal .button--outline:last-child{border-inline-start-width:0}.button-group--horizontal .button--outline:not(:first-child):not(:last-child){border-inline-width:0}
.button-group--full-width{width:100%}.button-group--full-width .button{flex:1}
.toggle-button{position:relative;isolation:isolate;display:inline-flex;height:2.25rem;width:fit-content;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-3xl);padding:0 1rem;font-size:var(--text-sm);font-weight:500;white-space:nowrap;outline:none;user-select:none;cursor:var(--cursor-interactive);transition:transform 250ms var(--ease-smooth),background-color 100ms var(--ease-out),box-shadow 100ms var(--ease-out);background:var(--default);color:currentColor}
.toggle-button:focus-visible{box-shadow:var(--ring-focus)}
.toggle-button:disabled{opacity:var(--disabled-opacity);pointer-events:none}
@media (hover:hover){.toggle-button:hover{background:var(--default-hover)}}
.toggle-button:active{background:var(--default-hover);transform:scale(.97)}
.toggle-button[data-selected="true"],.toggle-button[data-selected="true"]:active{background:var(--accent-soft);color:var(--accent-soft-foreground)}
@media (hover:hover){.toggle-button[data-selected="true"]:hover{background:var(--accent-soft-hover)}}
.toggle-button svg,.toggle-button .icon{pointer-events:none;margin:.25rem -.125rem;width:1rem;height:1rem;flex-shrink:0}
.toggle-button--sm{height:2rem;padding:0 .75rem}.toggle-button--lg{height:2.5rem;font-size:var(--text-base)}
.toggle-button--ghost{}
.toggle-button--icon-only{width:2.25rem;padding:0}.toggle-button--icon-only.toggle-button--sm{width:2rem}.toggle-button--icon-only.toggle-button--lg{width:2.5rem}
.toggle-button-group{display:inline-flex;height:auto;width:fit-content;align-items:center;justify-content:center;gap:0}
.toggle-button-group--vertical{flex-direction:column}.toggle-button-group--full-width{width:100%}.toggle-button-group--full-width .toggle-button{flex:1}
.toggle-button-group .toggle-button{border-radius:0}
.toggle-button-group .toggle-button:first-child{border-start-start-radius:var(--radius-3xl);border-end-start-radius:var(--radius-3xl)}
.toggle-button-group .toggle-button:last-child{border-start-end-radius:var(--radius-3xl);border-end-end-radius:var(--radius-3xl)}
.toggle-button-group .toggle-button:active{transform:none}
.toggle-button-group .toggle-button:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
.toggle-button-group__separator{border-radius:var(--radius-sm);background:currentColor;opacity:.15;position:absolute;pointer-events:none;inset-inline-start:-1px;top:25%;width:1px;height:50%}
.toggle-button-group .toggle-button[data-selected="true"] .toggle-button-group__separator,.toggle-button-group .toggle-button[data-selected="true"]+.toggle-button .toggle-button-group__separator{opacity:0}
.toggle-button-group--detached{gap:.25rem}.toggle-button-group--detached .toggle-button{border-radius:var(--radius-3xl)!important}.toggle-button-group--detached .toggle-button-group__separator{display:none}
.toolbar{display:grid;width:fit-content;grid-auto-flow:column;align-items:center;gap:.5rem}
.toolbar .separator--vertical{height:50%;align-self:center;min-height:1rem}
.toolbar--vertical{grid-auto-flow:row;align-items:start;justify-content:start}
.toolbar--attached{border-radius:var(--radius-3xl);background:var(--surface);padding:.25rem;box-shadow:var(--overlay-shadow)}
.button--primary{background-color:var(--accent);color:var(--accent-foreground)}@media (hover:hover){.button--primary:hover{background-color:var(--accent-hover)}}.button--primary:active{background-color:var(--accent-hover)}
.button--secondary{background-color:var(--default);color:var(--accent-soft-foreground)}@media (hover:hover){.button--secondary:hover{background-color:var(--default-hover)}}.button--secondary:active{background-color:var(--default-hover)}
.button--tertiary{background-color:var(--default);color:var(--default-foreground)}@media (hover:hover){.button--tertiary:hover{background-color:var(--default-hover)}}.button--tertiary:active{background-color:var(--default-hover)}
.button--ghost{background-color:transparent;color:var(--default-foreground)}@media (hover:hover){.button--ghost:hover{background-color:var(--default)}}.button--ghost:active{background-color:var(--default)}
.button--outline{background-color:transparent;color:var(--default-foreground)}@media (hover:hover){.button--outline:hover{background-color:color-mix(in srgb,var(--default) 60%,transparent)}}.button--outline:active{background-color:var(--default)}
.button--danger{background-color:var(--danger);color:var(--danger-foreground)}@media (hover:hover){.button--danger:hover{background-color:var(--danger-hover)}}.button--danger:active{background-color:var(--danger-hover)}
.button--danger-soft{background-color:var(--danger-soft);color:var(--danger-soft-foreground)}@media (hover:hover){.button--danger-soft:hover{background-color:var(--danger-soft-hover)}}.button--danger-soft:active{background-color:var(--danger-soft-hover)}
.toggle-button--ghost{background:transparent;color:var(--default-foreground)}@media (hover:hover){.toggle-button--ghost:hover{background:var(--default)}}.toggle-button--ghost:active{background:var(--default)}