switch.seperate.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__container {
    position: relative;
    display: block;
    width: 36px;
    height: calc(2 * var(--switch-knob-radius));
    margin: var(--switch-offset) 0;
}
input#switch:focus ~ .switch__container .switch__background {
    outline: 1px solid rgb(77, 144, 254);
}
input#switch:checked ~ .switch__container .switch__background{
    background: var(--switch-active);
    filter: saturate(50%) brightness(150%)
}
input#switch:checked ~ .switch__container .switch__nub {
    background: var(--switch-active);
    right: 0
}
.switch__container .switch__background {
    background-color: var(--switch);
}
.switch__background {
    display: block;
    width: 36px;
    height: calc(2 * var(--switch-radius));
    border-radius: var(--switch-radius);
    position: absolute;
    margin: var(--switch-offset) 0;
}
input#switch {
    opacity: 0;
    position: absolute;
}
.switch__nub {
    width: calc(2 * var(--switch-knob-radius));
    height: calc(2 * var(--switch-knob-radius));
    position: absolute;
    border-radius: 50%;
    background: white;
    z-index: 1;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2)
}