@layer components{.btn{white-space:nowrap;font-size:.875rem;font-weight:500;font-family:var(--font-sans);border-radius:var(--radius-md);cursor:pointer;background-color:var(--primary);height:2.25rem;color:var(--primary-foreground);border:1px solid #0000;outline:none;flex-shrink:0;justify-content:center;align-items:center;gap:.5rem;padding:0 1rem;line-height:1;text-decoration:none;transition:all .15s;display:inline-flex;& svg{pointer-events:none;flex-shrink:0;&:not([class*=size-]){width:1rem;height:1rem}}& .spinner{color:inherit}&:focus-visible{outline:2px solid var(--ring);outline-offset:2px}&:disabled,&[aria-disabled=true]{pointer-events:none;opacity:.5}&:disabled .spinner,&[aria-disabled=true] .spinner{animation-play-state:paused}&[data-variant=default]{background-color:var(--primary);color:var(--primary-foreground);&:hover{opacity:.9}}&[data-variant=secondary]{background-color:var(--secondary);color:var(--secondary-foreground);&:hover{background-color:color-mix(in oklch, var(--secondary) 85%, var(--secondary-foreground))}}&[data-variant=outline]{background-color:var(--background);color:var(--foreground);border:1px solid var(--border);box-shadow:var(--shadow-xs);&:hover{background-color:var(--accent);color:var(--accent-foreground)}}&[data-variant=ghost]{color:var(--foreground);background-color:#0000;border-color:#0000;&:hover{background-color:var(--accent);color:var(--accent-foreground)}}&[data-variant=destructive]{background-color:var(--destructive);color:var(--destructive-foreground);&:hover{opacity:.9}}&[data-variant=link]{color:var(--primary);text-underline-offset:4px;background-color:#0000;height:auto;padding:0;&:hover{text-decoration:underline}}&[data-variant=soft]{background-color:color-mix(in oklch, var(--primary) 12%, transparent);color:color-mix(in oklch, var(--primary) 80%, var(--foreground));&:hover{background-color:color-mix(in oklch, var(--primary) 20%, transparent)}}&[data-variant=dashed]{color:var(--foreground);border:1px dashed color-mix(in oklch, var(--foreground) 35%, transparent);background-color:#0000;&:hover{background-color:var(--accent);color:var(--accent-foreground);border-style:solid}}&[data-tone]{--_tone:var(--btn-color,var(--primary));--_tone-fg:var(--btn-color-fg,#fff);--_tone-ink:color-mix(in oklch, var(--_tone) 78%, var(--foreground))}&[data-tone=success]{--_tone:oklch(60% .15 150)}&[data-tone=warning]{--_tone:oklch(80% .16 80);--_tone-fg:oklch(28% .06 60)}&[data-tone=info]{--_tone:oklch(60% .16 250)}&[data-tone=destructive]{--_tone:var(--destructive);--_tone-fg:var(--destructive-foreground,#fff)}&[data-tone]:is(:not([data-variant]),[data-variant=default]){background-color:var(--_tone);color:var(--_tone-fg);&:hover{opacity:.9}}&[data-tone][data-variant=outline]{color:var(--_tone-ink);border-color:var(--_tone);background-color:#0000;&:hover{background-color:color-mix(in oklch, var(--_tone) 12%, transparent);color:var(--_tone-ink)}}&[data-tone]:is([data-variant=ghost],[data-variant=dashed]){color:var(--_tone-ink);&:hover{background-color:color-mix(in oklch, var(--_tone) 14%, transparent);color:var(--_tone-ink)}}&[data-tone][data-variant=dashed]{border-color:var(--_tone)}&[data-tone][data-variant=soft]{background-color:color-mix(in oklch, var(--_tone) 16%, transparent);color:var(--_tone-ink);&:hover{background-color:color-mix(in oklch, var(--_tone) 26%, transparent)}}&[data-tone][data-variant=link]{color:var(--_tone-ink)}&:dir(rtl) [data-rtl-flip]{scale:-1 1}&[data-size=xs]{border-radius:var(--radius-sm);height:1.75rem;padding:0 .5rem;font-size:.75rem}&[data-size=sm]{height:2rem;padding:0 .75rem;font-size:.8125rem}&[data-size=md]{height:2.25rem;padding:0 1rem;font-size:.875rem}&[data-size=lg]{height:2.75rem;padding:0 2rem;font-size:1rem}&[data-size=xl]{height:3.25rem;padding:0 2.5rem;font-size:1.125rem}&[data-size=icon]{width:2.25rem;height:2.25rem;padding:0}&[data-size=icon-xs]{border-radius:var(--radius-sm);width:1.75rem;height:1.75rem;padding:0}&[data-size=icon-sm]{width:2rem;height:2rem;padding:0}&[data-size=icon-lg]{width:2.75rem;height:2.75rem;padding:0}&[data-size=icon-xl]{width:3.25rem;height:3.25rem;padding:0}}@media (prefers-reduced-motion:reduce){.btn{transition:none}}@media (prefers-contrast:more){.btn{border:2px solid #0000;&[data-variant=default],&[data-variant=secondary],&[data-variant=destructive]{border-color:currentColor}&[data-variant=outline],&[data-variant=ghost]{border-color:var(--foreground)}}}@media (forced-colors:active){.btn{border:1px solid buttontext;&:disabled,&[aria-disabled=true]{color:graytext;border-color:graytext}}}}