:where([data-switch]){--switch--height: var(--override-switch--height, 1lh);--switch--width: calc(var(--switch--height) * 2);--switch--transition-easing: var(--override-switch--transition-easing, ease-in-out);--switch--transition-duration: var(--override-switch--transition-duration, .15s);--switch--accent-color: var(--override-switch--accent-color, currentColor);--switch--background-color: var(--override-switch--background-color, white);--switch--background: var(--switch--background-color);--switch--foreground: var(--switch--accent-color);display:inline-flex;width:var(--switch--width);height:var(--switch--height);padding:2px;background:var(--switch--background);border:1px solid var(--switch--foreground);border-radius:calc(infinity * 1px);transition:background-color var(--switch--transition-duration)}:where([data-switch]:checked){--switch--background: var(--switch--accent-color);--switch--foreground: var(--switch--background-color);border-color:var(--switch--accent-color)}:where([data-switch]):before{flex:0;content:"";transition:flex var(--switch--transition-duration) var(--switch--transition-easing)}:where([data-switch]:checked):before{flex:1}:where([data-switch]):after{display:inline-block;flex-shrink:0;height:100%;aspect-ratio:1;content:"";background-color:var(--switch--foreground);border-radius:calc(infinity * 1px);transition:background-color var(--switch--transition-duration) var(--switch--transition-easing)}@media(forced-colors:active){:where([data-switch]):after{background-color:canvasText}:where([data-switch]:checked):after{background-color:canvasText}}