@layer components{.button{--button-step-1:color-mix(in oklab, var(--button-bg), var(--tint-step-ink) var(--tint-hover-step));--button-step-2:color-mix(in oklab, var(--button-bg), var(--tint-step-ink) calc(var(--tint-hover-step) * 2));justify-content:center;align-items:center;gap:var(--s-2);font-family:var(--f-sans);font-weight:var(--fw-medium);line-height:var(--lh-tight);text-align:center;border-radius:var(--r-md);cursor:pointer;background-color:var(--button-bg);color:var(--button-ink);transition:background-color var(--m-fast) var(--ease-standard), color var(--m-fast) var(--ease-standard);border:0;display:inline-flex}.button>svg{inline-size:calc(var(--t-md) * var(--lh-tight));block-size:calc(var(--t-md) * var(--lh-tight));flex:none}.button[data-size=normal]{padding-block:var(--s-2);padding-inline:var(--s-4);font-size:var(--t-md)}.button[data-size=compact]{padding-block:var(--s-1);padding-inline:var(--s-3);font-size:var(--t-sm)}.button[data-size=large]{padding-block:var(--s-3);padding-inline:var(--s-5);font-size:var(--t-lg)}.button[data-size=large]>svg{inline-size:calc(var(--t-lg) * var(--lh-tight));block-size:calc(var(--t-lg) * var(--lh-tight))}.button[data-variant=primary]{--button-bg:var(--intent-primary-bg);--button-ink:var(--intent-primary-ink);--button-bg-hover:var(--button-step-1);--button-bg-pressed:var(--button-step-2)}.button[data-variant=neutral]{--button-bg:var(--surface-card);--button-ink:var(--text-primary);--button-bg-hover:var(--surface-sunken);--button-bg-pressed:var(--surface-page);box-shadow:inset 0 0 0 var(--w-hair) var(--border-control)}.button[data-variant=danger]{--button-bg:var(--intent-danger-solid);--button-ink:var(--intent-danger-solid-ink);--button-bg-hover:var(--button-step-1);--button-bg-pressed:var(--button-step-2)}.button:hover:not(:disabled){background-color:var(--button-bg-hover)}.button:active:not(:disabled){background-color:var(--button-bg-pressed)}.button:focus-visible{outline:var(--w-focus) solid var(--border-focus);outline-offset:var(--w-focus)}.button:disabled{background-color:var(--surface-sunken);color:var(--text-muted);cursor:default;box-shadow:inset 0 0 0 var(--w-hair) var(--border-control)}@media (prefers-reduced-motion:reduce){.button{transition:none}}}