.switch{--switch-width:46px;--switch-height:24px;--switch-bg:#d1d5db;--switch-checked-bg:#71d37b;--switch-offset:calc((var(--switch-height) - var(--circle-diameter))/2);--switch-transition:all .2s cubic-bezier(.27,.2,.25,1.51);--circle-diameter:18px;--circle-bg:#fff;--circle-shadow:1px 1px 2px #92929273;--circle-checked-shadow:-1px 1px 2px #a3a3a373;--circle-transition:var(--switch-transition);--icon-transition:all .2s cubic-bezier(.27,.2,.25,1.51);--icon-cross-color:var(--switch-bg);--icon-cross-size:8px;--icon-checkmark-color:var(--switch-checked-bg);--icon-checkmark-size:10px;--effect-width:calc(var(--circle-diameter)/2);--effect-height:calc(var(--effect-width)/2 - 1px);--effect-bg:var(--circle-bg);--effect-border-radius:1px;--effect-transition:all .2s ease-in-out}.switch input{display:none}.switch{display:inline-block}.switch svg{-webkit-transition:var(--icon-transition);-o-transition:var(--icon-transition);transition:var(--icon-transition);height:auto;position:absolute}.switch .checkmark{width:var(--icon-checkmark-size);color:var(--icon-checkmark-color);transform:scale(0)}.switch .cross{width:var(--icon-cross-size);color:var(--icon-cross-color)}.slider{box-sizing:border-box;width:var(--switch-width);height:var(--switch-height);background:var(--switch-bg);-webkit-transition:var(--switch-transition);-o-transition:var(--switch-transition);transition:var(--switch-transition);cursor:pointer;border-radius:999px;align-items:center;display:flex;position:relative}.circle{width:var(--circle-diameter);height:var(--circle-diameter);background:var(--circle-bg);border-radius:inherit;-webkit-box-shadow:var(--circle-shadow);box-shadow:var(--circle-shadow);-webkit-transition:var(--circle-transition);-o-transition:var(--circle-transition);transition:var(--circle-transition);z-index:1;left:var(--switch-offset);justify-content:center;align-items:center;display:flex;position:absolute}.slider:before{content:"";width:var(--effect-width);height:var(--effect-height);left:calc(var(--switch-offset) + (var(--effect-width)/2));background:var(--effect-bg);border-radius:var(--effect-border-radius);-webkit-transition:var(--effect-transition);-o-transition:var(--effect-transition);transition:var(--effect-transition);position:absolute}.switch input:checked+.slider{background:var(--switch-checked-bg)}.switch input:checked+.slider .checkmark{transform:scale(1)}.switch input:checked+.slider .cross{transform:scale(0)}.switch input:checked+.slider:before{left:calc(100% - var(--effect-width) - (var(--effect-width)/2) - var(--switch-offset))}.switch input:checked+.slider .circle{left:calc(100% - var(--circle-diameter) - var(--switch-offset));-webkit-box-shadow:var(--circle-checked-shadow);box-shadow:var(--circle-checked-shadow)}