@layer components{:root{--ks-spring:linear(0, .148, .363, .532, .658, .754, .821, .869, .906, .932, .951, .964, .974, .981, .986, .99, .993, .995, .996, .997, 1)}.knob-switch{--ks-w:46px;--ks-h:24px;--ks-knob:20px;--ks-pad:2px;--ks-bar-w:1.5px;--ks-bar-h:9px;--ks-ring:9px;--ks-ring-border:2px;--ks-on:#265af5;--ks-off:#e3e3e3;--ks-mark:#fff;--ks-bezel:linear-gradient(180deg, #fff 0%, #d1d1d1 100%);--ks-cap:linear-gradient(180deg, #f2f2f2 0%, #e8e8e8 100%);--ks-travel:calc(var(--ks-w) - var(--ks-knob) - var(--ks-pad) * 2);--ks-dur:.65s;width:var(--ks-w);height:var(--ks-h);vertical-align:middle;background:0 0;border:0;border-radius:9999px;flex-shrink:0;padding:0;display:inline-block;position:relative}.knob-switch[data-size=sm]{--ks-w:30px;--ks-h:16px;--ks-knob:13px;--ks-pad:1.5px;--ks-bar-w:1px;--ks-bar-h:6px;--ks-ring:6px;--ks-ring-border:1.5px}.dark .knob-switch{--ks-off:#2e3947;--ks-mark:#ffffff8c}.dark .knob-switch[data-checked]{--ks-mark:#fff}.dark .knob-switch[data-dark-off=gray]{--ks-off:#434656}.knob-switch__track{border-radius:inherit;background-color:var(--ks-off);transition:background-color .3s;position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 1px 2px #00000040}.knob-switch[data-checked] .knob-switch__track{background-color:var(--ks-on)}.knob-switch__marks{transform:translateX(calc(var(--ks-travel) * -1));transition:transform var(--ks-dur) var(--ks-spring);position:absolute;inset:0}.knob-switch[data-checked] .knob-switch__marks{transform:translate(0)}.knob-switch__mark-i,.knob-switch__mark-o{position:absolute;top:50%;translate:-50% -50%}.knob-switch__mark-i{left:calc((var(--ks-w) - var(--ks-knob)) / 2);width:var(--ks-bar-w);height:var(--ks-bar-h);background:var(--ks-mark);border-radius:1px}.knob-switch__mark-o{left:calc((var(--ks-w) + var(--ks-knob)) / 2 + var(--ks-travel));width:var(--ks-ring);height:var(--ks-ring);border:var(--ks-ring-border) solid var(--ks-mark);box-sizing:border-box;border-radius:9999px}.knob-switch__knob{top:var(--ks-pad);left:var(--ks-pad);width:var(--ks-knob);height:var(--ks-knob);background:var(--ks-bezel);transition:transform var(--ks-dur) var(--ks-spring), scale .15s ease;border-radius:9999px;position:absolute;transform:translate(0);box-shadow:0 .5px .7px -.4px #00000042,0 1.3px 1.8px -.75px #00000040,0 2.5px 3.5px -1.1px #0000003d,0 4.8px 6.7px -1.5px #0003}.knob-switch[data-checked] .knob-switch__knob{transform:translateX(var(--ks-travel))}.knob-switch__knob:after{content:"";border-radius:inherit;background:var(--ks-cap);position:absolute;inset:1px}:where(button:not(:disabled):active) .knob-switch__knob,.knob-switch:where(button):not(:disabled):active .knob-switch__knob{scale:.94}.knob-switch:where(button){cursor:pointer;outline:none}.knob-switch:where(button):focus-visible{box-shadow:0 0 0 3px #265af559}.knob-switch:where(button):disabled{cursor:not-allowed;opacity:.5}@media (prefers-reduced-motion:reduce){.knob-switch__track,.knob-switch__marks,.knob-switch__knob{transition-duration:.01ms!important}}}
