switch.css

:root, :host {
    --switch: hsl(0, 0%, 73%);
    --switch-active: hsl(231, 48%, 48%);
    --switch-knob-radius: 10px;
    --switch-radius: 7px;
    --switch-offset: calc(var(--switch-knob-radius) - var(--switch-radius));
}
.switch {
    position: relative;
    display: block;
    width: 36px;
    height: calc(2 * var(--switch-knob-radius));
    margin: var(--switch-offset) 0;
}
.switch input:focus ~ .switchbg {
    outline: 1px solid rgb(77, 144, 254);
}
.switch input:checked ~ .switchbg{
    background: var(--switch-active);
    filter: saturate(50%) brightness(150%)
}
.switch input:checked ~ .nub {
    background: var(--switch-active);
    right: 0
}
.switch input ~ .switchbg {
    background-color: var(--switch);
}
.switchbg {
    display: block;
    width: 36px;
    height: calc(2 * var(--switch-radius));
    border-radius: var(--switch-radius);
    position: absolute;
    top: 0;
    margin: var(--switch-offset) 0;
}
.switch input {
    width: 36px;
    height: calc(2 * var(--switch-knob-radius));
    margin: 0;
    opacity: 0;
    position: absolute
}
.nub {
    width: calc(2 * var(--switch-knob-radius));
    height: calc(2 * var(--switch-knob-radius));
    position: absolute;
    top: 0;
    border-radius: 50%;
    background: white;
    z-index: 1;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2)
}