.switch{align-items:center;display:flex;gap:1rem;justify-content:center;padding:1rem 0}.switch .switch__icon{align-items:center;display:flex;& svg{aspect-ratio:1/1;height:2rem;fill:var(--color-light)}}.switch .switch-control{border-radius:3rem;display:flex;height:2.2rem;justify-content:center;margin:0;overflow:hidden;position:relative;width:3.6rem}.switch .switch-control span{cursor:pointer;inset:0;position:absolute;-webkit-transition:.4s;transition:.4s;z-index:3}.switch .switch-control span:before{aspect-ratio:1/1;border-radius:50%;content:"";left:.3rem;position:absolute;top:50%;transform:translateY(-50%) translateX(0);-webkit-transition:.4s;transition:left .4s ease;width:1.4rem}.switch .switch-control input:checked+span:before{left:calc(100% - 1.7rem)}.mode-light{& .switch .switch__icon--light svg{fill:var(--color-black)}}.mode-dark{& .switch .switch__icon--dark svg{fill:var(--color-white)}}