.switch{display:inline-block;height:22px;margin-top:10px;position:relative;width:40px}.switch input{display:none}.slider{background-color:#ccc;bottom:0;cursor:pointer;left:0;right:0;top:0}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{background-color:#fff;bottom:3px;box-shadow:0 2px 1px 1px #00000020;content:"";height:15px;left:3px;top:3px;width:15px}input:checked+.slider{background-color:var(--primary-color)}input:focus+.slider{box-shadow:0 0 1px var(--primary-color)}input:checked+.slider:before{transform:translate(16px)}.slider.round{border-radius:20px}.slider.round:before{border-radius:50%}