.switch{display:inline-block;font-size:17px;height:24px;position:relative;width:48px}.switch input{height:0;opacity:0;width:0}.slider{--background:#474747;background-color:var(--background);border-radius:30px;cursor:pointer;inset:0}.slider,.slider:before{position:absolute;transition:.5s}.slider:before{background:var(--background);border-radius:50%;bottom:13%;box-shadow:inset 6px -4px #ffbd00;content:"";height:18px;left:15%;width:18px}input:checked+.slider{background-color:#fff}input:checked+.slider:before{box-shadow:inset 15px -4px 0 8px #ffbd00;transform:translate(100%)}