div.switch-input{display:flex;position:relative}div.switch-input input{position:absolute;width:100%;height:100%;opacity:0;z-index:1}div.switch-input input:checked+label:after{transform:translate(-100%);left:calc(100% - .25rem)}div.switch-input input:checked+label:before{background-color:var(--blue-300)}div.switch-input label{position:relative}div.switch-input label:before{content:"";width:3rem;height:1.75rem;border-radius:6.25rem;display:block;position:relative;background-color:var(--neutral-800);transition:background .3s var(--quad-ease-out)}div.switch-input label:after{content:"";width:1.25rem;height:1.25rem;position:absolute;top:.25rem;left:.25rem;display:block;background-color:var(--pure-white);border-radius:50%;transition:transform .3s var(--quad-ease-out),left .3s var(--quad-ease-out)}