:root{--button-width:500px;--button-height:295px;--toggle-diameter:255px;--button-toggle-offset:calc(var(--button-height)/2 - var(--toggle-diameter)/2);--toggle-shadow-offset:10px;--toggle-wider:333px;--color-grey:#e9e9e9;--color-dark-grey:#39393d;--color-green:#30d158}body{display:flex;justify-content:center;align-content:center;min-height:100vh}span{position:relative;width:var(--button-width);height:var(--button-height);border-radius:calc(var(--button-height)/2);background-color:var(--color-grey)}span,span:after{display:inline-block;transition:all .3s ease-in-out}span:after{content:"";position:absolute;height:var(--toggle-diameter);width:var(--toggle-diameter);background-color:#fff;border-radius:calc(var(--toggle-diameter)/2);top:var(--button-toggle-offset);transform:translateX(var(--button-toggle-offset));box-shadow:var(--toggle-shadow-offset) 0 calc(var(--button-toggle-offset)*4) rgba(0,0,0,.1)}input[type=checkbox]:checked+label span{background-color:var(--color-green)}input[type=checkbox]:checked+label span:after{transform:translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));box-shadow:calc(var(--toggle-shadow-offset)*-1) 0 calc(var(--button-toggle-offset)*4) rgba(0,0,0,.1)}input[type=checkbox]{display:none}input[type=checkbox]:active+label span:after{width:var(--toggle-wider)}input[type=checkbox]:checked:active+label span:after{transform:translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)))}@media (prefers-color-scheme:dark){body{background-color:#1c1c1e}span{background-color:var(--color-dark-grey)}}
/*# sourceMappingURL=src.671af210.css.map */