.switch{display:inline-block;height:24px;position:relative;width:48px}.switch-margin-xs{margin-left:.5em}.switch input{display:none}.slider{background-color:#ccc;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.slider:before{background-color:#fff;bottom:3px;content:"";height:18px;left:3px;position:absolute;transition:.4s;width:18px}input:checked+.slider{background-image:linear-gradient(to right, var(--main), var(--secondary))}input:checked+.slider:before{transform:translateX(24px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}