@layer properties,theme,base;@layer components{.nash-icon-button[data-reveal=hover]{opacity:0;transition:opacity .15s,color .15s,background-color .15s}[data-action-reveal]:is(:hover,:focus-within) .nash-icon-button[data-reveal=hover],.nash-icon-button[data-reveal=hover]:is(:focus-visible,[aria-expanded=true]){opacity:1}@media (hover:none),(prefers-reduced-motion:reduce){.nash-icon-button[data-reveal=hover]{opacity:1;transition:none}}.nash-icon-button-spinner path:first-child{opacity:.2}.nash-icon-button-icon svg{pointer-events:none;width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4);flex-shrink:0}.nash-icon-button[data-size=xs] .nash-icon-button-icon svg{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.nash-icon-button[data-size=sm] .nash-icon-button-icon svg{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.nash-icon-button[data-size=xl] .nash-icon-button-icon svg{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.nash-icon-button[data-variant=soft]{background-color:var(--secondary);border-color:color-mix(in oklch, var(--secondary) 30%, transparent)}.nash-icon-button[data-variant=soft]:hover{background-color:color-mix(in oklch, var(--secondary) 80%, transparent)}.nash-icon-button[data-variant=destructive]{border-color:color-mix(in oklch, var(--destructive-foreground) 30%, transparent)}}@layer utilities;