.toggle-checkbox{cursor:pointer;height:0;opacity:0;position:absolute;width:0}.toggle-slot{border-radius:10em;box-sizing:content-box;font-size:2.3px;height:10em;position:relative;transition:background-color .25s;width:20em}.toggle-checkbox:checked~.toggle-slot{background-color:#374151}.toggle-button{background-color:#ffeccf;border-radius:50%;box-shadow:inset 0 0 0 .75em #ffbb52;height:6.5em;left:0;position:absolute;transform:translate(11.75em,1.75em);transition:background-color .25s,border-color .25s,transform .5s cubic-bezier(.26,2,.46,.71);width:6.5em}.toggle-checkbox:checked~.toggle-slot .toggle-button{background-color:#485367;box-shadow:inset 0 0 0 .75em #fff;transform:translate(1.75em,1.75em)}.sun-icon{color:#ffbb52}.sun-icon,.sun-icon-wrapper{height:6em;position:absolute;width:6em}.sun-icon-wrapper{left:0;opacity:1;transform:translate(2em,2em) rotate(15deg);transform-origin:50% 50%;transition:opacity .15s,transform .5s cubic-bezier(.26,2,.46,.71)}.toggle-checkbox:checked~.toggle-slot .sun-icon-wrapper{opacity:0;transform:translate(3em,2em) rotate(0)}.moon-icon{color:#fff}.moon-icon,.moon-icon-wrapper{height:6em;position:absolute;width:6em}.moon-icon-wrapper{left:0;opacity:0;transform:translate(11em,2em) rotate(0);transform-origin:50% 50%;transition:opacity .15s,transform .5s cubic-bezier(.26,2.5,.46,.71)}.toggle-checkbox:checked~.toggle-slot .moon-icon-wrapper{opacity:1;transform:translate(12em,2em) rotate(-15deg)}