@layer components{.swap{border-radius:var(--radius-md);min-width:2.25rem;min-height:2.25rem;font-family:var(--font-sans);color:var(--foreground);cursor:pointer;user-select:none;vertical-align:middle;perspective:40rem;place-items:center;font-size:.875rem;font-weight:500;line-height:1;display:inline-grid;position:relative;&>input[type=checkbox]{-webkit-appearance:none;appearance:none;opacity:0;width:100%;height:100%;cursor:inherit;border:0;grid-area:1/1;margin:0;padding:0}& .swap-on,& .swap-off,& .swap-indeterminate{opacity:0;pointer-events:none;backface-visibility:hidden;grid-area:1/1;justify-content:center;align-items:center;transition:opacity .3s cubic-bezier(.4,0,.2,1),rotate .3s cubic-bezier(.4,0,.2,1),scale .3s cubic-bezier(.4,0,.2,1);display:inline-flex}& svg:not([class*=size-]){flex-shrink:0;width:1.25rem;height:1.25rem}& .swap-off{opacity:1}&:has(>input:indeterminate){& .swap-off{opacity:0}& .swap-indeterminate{opacity:1}}&:has(>input:checked),&[data-active]{& .swap-off,& .swap-indeterminate{opacity:0}& .swap-on{opacity:1}}&[data-variant=rotate]{& .swap-on,& .swap-indeterminate{rotate:-45deg}&:has(>input:indeterminate){& .swap-off{rotate:45deg}& .swap-indeterminate{rotate:0deg}}&:has(>input:checked),&[data-active]{& .swap-off,& .swap-indeterminate{rotate:45deg}& .swap-on{rotate:0deg}}}&[data-variant=flip]{& .swap-on,& .swap-indeterminate{rotate:y 180deg}&:has(>input:indeterminate){& .swap-off{rotate:y -180deg}& .swap-indeterminate{rotate:y 0deg}}&:has(>input:checked),&[data-active]{& .swap-off,& .swap-indeterminate{rotate:y -180deg}& .swap-on{rotate:y 0deg}}}&[data-size=sm]{min-width:2rem;min-height:2rem;font-size:.75rem;& svg:not([class*=size-]){width:1rem;height:1rem}}&[data-size=lg]{min-width:2.75rem;min-height:2.75rem;font-size:1.125rem;& svg:not([class*=size-]){width:1.5rem;height:1.5rem}}&:hover:not(:has(>input:disabled)){background-color:var(--accent);color:var(--accent-foreground)}&:has(>input:focus-visible){outline:2px solid var(--ring);outline-offset:2px}&:has(>input:disabled){opacity:.5;cursor:not-allowed}}@media (prefers-reduced-motion:reduce){.swap .swap-on,.swap .swap-off,.swap .swap-indeterminate{transition-duration:.01ms!important}}@media (prefers-contrast:more){.swap{border:2px solid #0000;&:has(>input:checked),&[data-active]{border-color:currentColor}}}@media (forced-colors:active){.swap{color:buttontext;forced-color-adjust:none;border:1px solid buttontext;&:has(>input:checked),&[data-active]{color:highlighttext;background:highlight}&:has(>input:disabled){color:graytext;border-color:graytext}}}}