@layer reset, tokens, base, layout, components, variants, states, utilities, overrides;
@layer reset,tokens,base,layout;@layer components{.button{--wel-button-bg:var(--wel-color-surface-sunken);--wel-button-ink:var(--wel-color-ink);--wel-button-border:transparent;--wel-button-radius:var(--wel-radius-control);--wel-button-padding-block:var(--wel-space-2);--wel-button-padding-inline:var(--wel-space-4);--wel-button-bg-hover:oklch(from var(--wel-button-bg) calc(l - .06) c h);--wel-button-bg-active:oklch(from var(--wel-button-bg) calc(l - .1) c h);--wel-button-ink-hover:var(--wel-button-ink);justify-content:center;align-items:center;gap:var(--wel-space-2);padding-block:var(--wel-button-padding-block);padding-inline:var(--wel-button-padding-inline);background-color:var(--wel-button-bg);min-block-size:1.5rem;color:var(--wel-button-ink);border:var(--wel-border-width) solid var(--wel-button-border);border-radius:var(--wel-button-radius);font:inherit;font-size:var(--wel-text-size-0);line-height:var(--wel-text-leading-tight);transition:background-color calc(var(--wel-motion-duration-1) * var(--wel-motion)) var(--wel-motion-ease), color calc(var(--wel-motion-duration-1) * var(--wel-motion)) var(--wel-motion-ease), border-color calc(var(--wel-motion-duration-1) * var(--wel-motion)) var(--wel-motion-ease), translate calc(var(--wel-motion-duration-1) * var(--wel-motion)) var(--wel-motion-ease);font-weight:500;text-decoration:none;display:inline-flex}.button>:where(svg){flex:none;block-size:1em;inline-size:1em}@media (forced-colors:active){.button{color:buttontext;background-color:buttonface;border-color:buttonborder}.button:where(:disabled){color:graytext;border-color:graytext}}}@layer variants{.button[data-variant=primary]{--wel-button-bg:var(--wel-color-accent);--wel-button-ink:var(--wel-color-accent-contrast)}.button[data-variant=secondary]{--wel-button-bg:transparent;--wel-button-ink:var(--wel-color-ink);--wel-button-border:var(--wel-color-border-strong);--wel-button-bg-hover:var(--wel-color-accent-tint);--wel-button-bg-active:var(--wel-color-accent-tint);--wel-button-ink-hover:var(--wel-color-accent-hover)}.button[data-variant=ghost]{--wel-button-bg:transparent;--wel-button-ink:var(--wel-color-accent);--wel-button-border:var(--wel-color-border-strong);--wel-button-bg-hover:var(--wel-color-accent-tint);--wel-button-bg-active:var(--wel-color-accent-tint);--wel-button-ink-hover:var(--wel-color-accent-hover)}.button[data-variant=danger]{--wel-button-bg:var(--wel-color-danger);--wel-button-ink:var(--wel-color-surface)}.button[data-size=sm]{--wel-button-padding-block:var(--wel-space-1);--wel-button-padding-inline:var(--wel-space-3);font-size:var(--wel-text-size--1)}.button[data-size=lg]{--wel-button-padding-block:var(--wel-space-3);--wel-button-padding-inline:var(--wel-space-5);font-size:var(--wel-text-size-1)}}@layer states{@media (hover:hover){.button:hover{background-color:var(--wel-button-bg-hover);color:var(--wel-button-ink-hover)}}.button:active{background-color:var(--wel-button-bg-active);color:var(--wel-button-ink-hover);translate:0 calc(1px * var(--wel-motion))}.button[aria-busy=true]{pointer-events:none}.button[aria-busy=true]:before{content:"";border:.125em solid;border-radius:var(--wel-radius-full);block-size:1em;inline-size:1em;animation:wel-button-spin calc(var(--wel-motion-duration-4) * 2 * var(--wel-motion)) linear infinite;border-block-start-color:#0000;flex:none}.button[aria-busy=true]>:where(svg:first-of-type){display:none}.button:disabled{background-color:var(--wel-color-surface-sunken);color:var(--wel-color-ink-faint);border-color:#0000;translate:none}}@layer utilities,overrides;@keyframes wel-button-spin{to{rotate:1turn}}