.button{--button-height:3rem;--button-pad:1.375rem;--button-radius:14px;--button-inset:.3125rem;--button-bg:var(--color-ink);--button-bg-hover:#25282d;--button-fg:#fff;--chip-fill:var(--color-brand);--chip-fg:#fff;gap:var(--space-3);min-height:var(--button-height);padding-inline:var(--button-pad);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--button-fg);text-align:center;letter-spacing:-.005em;white-space:nowrap;background:var(--button-bg);border-radius:var(--button-radius);transition:background-color var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);border:0;justify-content:center;align-items:center;line-height:1.2;text-decoration:none;display:inline-flex}@media (hover:hover){.button:hover{background:var(--button-bg-hover)}}.button:active{transform:scale(.98)}.button[disabled]{cursor:not-allowed;opacity:.55}.button--chip-after{padding-right:var(--button-inset)}.button--chip-before{padding-left:var(--button-inset)}.button--light{--button-bg:#fff;--button-bg-hover:#eceef0;--button-fg:var(--color-ink);--chip-fill:var(--color-ink);--chip-fg:#fff}.button--dark{--button-bg:#262a30;--button-bg-hover:#30353c;--button-fg:#fff;--chip-fill:#3a3f47;--chip-fg:#fff}.button--brand{--button-bg:var(--color-brand);--button-bg-hover:var(--color-brand-strong);--button-fg:#fff;--chip-fill:#fff;--chip-fg:var(--color-brand)}.button--secondary{--button-bg:var(--color-surface-alt);--button-bg-hover:var(--color-surface-sunken);--button-fg:var(--color-ink);--chip-fill:#fff;--chip-fg:var(--color-ink)}.button--ghost{--button-bg:transparent;--button-bg-hover:var(--color-brand-soft);--button-fg:var(--color-brand-strong);--chip-fill:var(--color-brand-soft);--chip-fg:var(--color-brand-strong);--button-pad:.75rem}.button--sm{--button-height:2.5rem;--button-pad:1rem;--button-radius:12px;--button-inset:.25rem;gap:var(--space-2);font-size:var(--text-xs)}.button--lg{--button-height:3.5rem;--button-pad:1.625rem;--button-radius:16px;--button-inset:.375rem;gap:var(--space-4);font-size:.9375rem}.button--block{width:100%}.button__label{padding-block:var(--space-2)}.button__chip{width:calc(var(--button-height) - 2 * var(--button-inset));height:calc(var(--button-height) - 2 * var(--button-inset));color:var(--chip-fg);background:var(--chip-fill);border-radius:calc(var(--button-radius) - var(--button-inset));flex-shrink:0;place-items:center;display:grid;position:relative;overflow:hidden}.button__chip svg{flex-shrink:0}.button__track{width:max-content;transition:transform .45s var(--ease-out);gap:1.5rem;display:flex;position:absolute;top:50%;left:50%;transform:translate(calc(-50% - 1.25rem),-50%)}.button:hover .button__track,.button:focus-visible .button__track{transform:translate(calc(1.25rem - 50%),-50%)}
