.sc-toggle{--on:#99dc39;--of:#f44336;--lg:var(--of);width:calc(var(--sz) * 4);height:calc(var(--sz) * 2);flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.sc-toggle *,.sc-toggle :before,.sc-toggle :after{box-sizing:border-box;transition:all .35s}.sc-toggle input{display:none}.sc-toggle label{width:calc(var(--sz) * 4);height:calc(var(--sz) * 2);border-radius:var(--sz);box-shadow:0 0 calc(var(--sz) / 50) calc(var(--sz) / 50) #0006, 0 calc(var(--sz) / -20) calc(var(--sz) / 5) calc(var(--sz) / 25) #0b0b10, 0 calc(var(--sz) / 20) calc(var(--sz) / 10) calc(var(--sz) / 50) #f5f5f588, 0 calc(var(--sz) / -20) calc(var(--sz) / 50) calc(var(--sz) / 15) #00000060;cursor:pointer;background:linear-gradient(#0d121780,#12172080);position:absolute}.sc-toggle label:before{content:"";border-radius:var(--sz);width:100%;height:100%;box-shadow:0 0 calc(var(--sz) / 3) calc(var(--sz) / 10) #000 inset;background:repeating-linear-gradient(45deg,#111 0 2px,#0000 3px 4px),repeating-linear-gradient(-45deg,#000 0 2px,#0000 3px 4px);position:absolute}.sc-toggle .thumb{width:calc(var(--sz) * 2.5);height:calc(calc(var(--sz) * 2) - calc(var(--sz) / 8));top:calc(calc(var(--sz) / 10) + calc(var(--sz) / -30));left:calc(calc(var(--sz) / 10) + calc(var(--sz) / -30));border-radius:var(--sz);cursor:pointer;z-index:1;box-shadow:calc(var(--sz) / -10) 0 calc(var(--sz) / 10) calc(var(--sz) / -10) var(--lg), calc(var(--sz) / 10) 0 calc(var(--sz) / 10) calc(var(--sz) / -10) var(--lg) inset, calc(var(--sz) / -50) calc(var(--sz) / 50) calc(var(--sz) / 30) 0 #fff2 inset, 0 0 calc(var(--sz) / 10) calc(var(--sz) / 50) #000c, 0 calc(var(--sz) / 4) calc(var(--sz) / 5) 0 #000d;background:linear-gradient(#474747,#212121);justify-content:center;align-items:center;display:flex;position:absolute;overflow:hidden}.sc-toggle input:checked+label .thumb{--lg:var(--on);left:calc(calc(100% - calc(calc(var(--sz) * 2) - calc(var(--sz) / 3))) - calc(calc(var(--sz) / 10) + calc(var(--sz) / 1.25)));box-shadow:calc(var(--sz) / 10) 0 calc(var(--sz) / 10) calc(var(--sz) / -10) var(--lg), calc(var(--sz) / -10) 0 calc(var(--sz) / 10) calc(var(--sz) / -10) var(--lg) inset, calc(var(--sz) / -50) calc(var(--sz) / 50) calc(var(--sz) / 30) 0 #fff2 inset, 0 0 calc(var(--sz) / 10) calc(var(--sz) / 50) #000c, 0 calc(var(--sz) / 4) calc(var(--sz) / 5) 0 #000d}.sc-toggle .thumb:before,.sc-toggle .thumb:after{content:"";border-radius:var(--sz) calc(var(--sz) / 5) calc(var(--sz) / 5) var(--sz);width:40%;height:90%;left:calc(var(--sz) / 10);box-shadow:calc(var(--sz) / -10) 0 calc(var(--sz) / 8) calc(var(--sz) / -10) var(--lg) inset, calc(var(--sz) / 10) 0 calc(var(--sz) / 5) 0 #0008 inset;filter:blur(1px);margin-top:calc(var(--sz) / 20);background:linear-gradient(#00000012,#0004);position:absolute}.sc-toggle input:checked+label .thumb:before{--lg:#fff0}.sc-toggle .thumb:after{border-radius:calc(var(--sz) / 5) var(--sz) var(--sz) calc(var(--sz) / 5);left:calc(var(--sz) / .725);--lg:#fff0;box-shadow:calc(var(--sz) / 10) 0 calc(var(--sz) / 8) calc(var(--sz) / -10) var(--lg) inset, calc(var(--sz) / 10) 0 calc(var(--sz) / 5) 0 #0008 inset}.sc-toggle input:checked+label .thumb:after{--lg:var(--on)}.sc-toggle .lights{width:calc(100% + calc(var(--sz) * 2));height:calc(var(--sz) / 1.75);z-index:0;justify-content:space-between;display:flex;position:absolute}.sc-toggle .lights span{width:calc(var(--sz) / 1.75);height:calc(var(--sz) / 1.75);border-radius:var(--sz);box-shadow:0 0 calc(var(--sz) / 50) calc(var(--sz) / 50) #0008, 0 calc(var(--sz) / -20) calc(var(--sz) / 10) calc(var(--sz) / 500) #000, 0 calc(var(--sz) / 20) calc(var(--sz) / 10) calc(var(--sz) / 500) #fff8, 0 0 calc(var(--sz) / 20) calc(var(--sz) / 25) #000;background:#121212;justify-content:center;align-items:center;display:flex;position:relative}.sc-toggle .lights span:after{content:"";width:calc(100% - calc(var(--sz) / 15));height:calc(100% - calc(var(--sz) / 15));background:radial-gradient(circle at 50% 32%, #fff5 0 calc(var(--sz) / 20), #000 calc(var(--sz) / 3) calc(var(--sz) / 3));border-radius:var(--sz);top:calc(var(--sz) / 50);position:absolute}.sc-toggle .light-off:after{box-shadow:0 0 calc(var(--sz) / 2.5) 0 var(--lg), 0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) var(--lg) inset, 0 calc(var(--sz) / -20) calc(var(--sz) / 10) calc(var(--sz) / 10) #000 inset;background:radial-gradient(circle at 50% 32%, #fff 0 calc(var(--sz) / 20), #fff8 calc(var(--sz) / 3) calc(var(--sz) / 3))}.sc-toggle input:checked+label+.lights .light-off:after{box-shadow:0 0 calc(var(--sz) / 3) 0 #f5000020, 0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) #f5000020 inset;background:radial-gradient(circle at 50% 32%, #fff5 0 calc(var(--sz) / 20), #000 calc(var(--sz) / 3) calc(var(--sz) / 3))}.sc-toggle .light-on:after{box-shadow:0 0 calc(var(--sz) / 3) 0 #00f56d20, 0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) #00f56d20 inset}.sc-toggle input:checked+label+.lights .light-on:after{--lg:var(--on);box-shadow:0 0 calc(var(--sz) / 2.5) 0 var(--lg), 0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) var(--lg) inset, 0 calc(var(--sz) / -20) calc(var(--sz) / 10) calc(var(--sz) / 10) #000 inset;background:radial-gradient(circle at 50% 32%, #fff 0 calc(var(--sz) / 20), #fff2 calc(var(--sz) / 3) calc(var(--sz) / 3))}