.classic-switch{position:relative;display:inline-block;width:46px;height:24px}.classic-switch input{opacity:0;width:0;height:0}.classic-switch label{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#ccc;border-radius:20px;cursor:pointer}.classic-switch label:after{content:'';position:absolute;top:3.2px;left:4px;width:18px;height:18px;background-color:#fff;border-radius:50%;transition:.3s}.classic-switch input[type=checkbox]:checked+label{background-color:currentColor}.classic-switch input[type=checkbox]:checked+label:after{transform:translateX(21px)}.classic-switch.disabled{opacity:.5}.classic-switch.modern{position:relative;display:inline-block;width:34px;height:14px}.classic-switch.modern input{opacity:0;width:0;height:0}.classic-switch.modern label{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#ccc;border-radius:20px;cursor:pointer}.classic-switch.modern label:after{content:'';position:absolute;top:-3px;left:-4px;width:20px;height:20px;background-color:var(--bg-one);border-radius:50%;transition:.3s;box-shadow:rgba(15,12,12,.2) 0 2px 1px -1px,rgba(0,0,0,.14) 0 1px 1px 0,rgba(0,0,0,.12) 0 1px 3px 0}.classic-switch.modern input[type=checkbox]:checked+label{background-color:rgba(var(--primary-rgb),.5)}.classic-switch.modern input[type=checkbox]:checked+label:after{transform:translateX(20px);background-color:var(--primary)}.classic-switch.modern:hover input[type=checkbox]+label:after{box-shadow:rgba(0,0,0,.2) 0 2px 1px -1px,rgba(0,0,0,.14) 0 1px 1px 0,rgba(0,0,0,.12) 0 1px 3px 0,rgba(var(--primary-rgb),.2) 0 0 0 7px}