.switch{--line: #e8ebfb;--dot: #275efe;--circle: #d3d4ec;--background: #fff;--duration: .3s;--text: #9ea0be;--shadow: 0 1px 3px rgba(0, 9, 61, .3);--switchHeight: 32px;--switchWidth: 60px;--dotHeight: 24px;--dotWidth: 24px;cursor:pointer;position:relative}.switch:before{content:"";width:var(--switchWidth);height:var(--switchHeight);border-radius:16px;background:var(--background);position:absolute;left:0;top:0;box-shadow:var(--shadow)}.switch input{display:none}.switch input+div{position:relative}.switch input+div:before,.switch input+div:after{--s: 1;content:"";position:absolute;height:4px;top:14px;width:24px;background:var(--line);-webkit-transform:scaleX(var(--s));transform:scaleX(var(--s));-webkit-transition:-webkit-transform var(--duration) ease;transition:-webkit-transform var(--duration) ease;transition:transform var(--duration) ease;transition:transform var(--duration) ease,-webkit-transform var(--duration) ease}.switch input+div:before{--s: 0;left:4px;-webkit-transform-origin:0 50%;transform-origin:0 50%;border-radius:2px 0 0 2px}.switch input+div:after{left:32px;-webkit-transform-origin:100% 50%;transform-origin:100% 50%;border-radius:0 2px 2px 0}.switch input+div span{padding-left:60px;line-height:28px;color:var(--text)}.switch input+div span:before{--x: 0;--b: var(--circle);--s: 4px;content:"";position:absolute;left:4px;top:4px;width:var(--dotWidth);height:var(--dotHeight);border-radius:50%;box-shadow:inset 0 0 0 var(--s) var(--b);-webkit-transform:translateX(var(--x));transform:translate(var(--x));-webkit-transition:box-shadow var(--duration) ease,-webkit-transform var(--duration) ease;transition:box-shadow var(--duration) ease,-webkit-transform var(--duration) ease;transition:box-shadow var(--duration) ease,transform var(--duration) ease;transition:box-shadow var(--duration) ease,transform var(--duration) ease,-webkit-transform var(--duration) ease}.switch input+div span:not(:empty){padding-left:68px}.switch input:checked+div:before{--s: 1}.switch input:checked+div:after{--s: 0}.switch input:checked+div span:before{--x: 28px;--s: 12px;--b: var(--dot)}