input{display:none}.circle-label{width:90px;height:45px;border-radius:25px;background:#f3f3f3;box-shadow:inset 10px 10px 30px rgba(0,0,0,.05);cursor:pointer;position:relative;overflow:hidden;transition:all .5s}.circle,.circle-label{display:flex;align-items:center;justify-content:center}.circle{width:35px;height:35px;border-radius:50%;background:#fff;box-shadow:10px 10px 20px rgba(0,0,0,.05),inset -10px -10px 30px rgba(0,0,0,.05);left:0;transform:translate(10%,-50%);top:50%}.circle,svg{position:absolute}svg{width:20px}.sun{color:#ffd600;margin-top:0;opacity:1}.moon{margin-top:-150%;color:#fff;opacity:0}input[type=checkbox]:checked+.circle-label .circle{left:100%;transform:translate(-110%,-50%);background:#2c2c2f;box-shadow:10px 10px 20px rgba(0,0,0,.5),inset -10px -10px 30px rgba(0,0,0,.5)}input[type=checkbox]:checked+.circle-label{background:#1f1f21;box-shadow:inset 10px 10px 30px rgba(0,0,0,.5)}input[type=checkbox]:checked+.circle-label .circle .sun{margin-top:150%;opacity:0}input[type=checkbox]:checked+.circle-label .circle .moon{margin-top:0;opacity:1}.circle-label:active .circle{width:200px}