input[type=checkbox].switch {
    --primary-50: #F3EBFD;
    --primary-100: #E6D7FB;
    --primary-200: #CDAFF7;
    --primary-300: #B588F4;
    --primary-500: #8338EC;
    --base-stroke: #F2F2F4;

    position: relative;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    --switch-width: 31.5px;
    --switch-height: 18px;
    --switch-background-color: var(--primary-50);

    --switch-border-color: var(--primary-200);
    --switch-border-radius: 9px;
    --switch-transition-duration: 0.15s;
    --switch-transition: background-color var(--switch-transition-duration) ease-in-out,
        border-color var(--switch-transition-duration) ease-in-out,
        box-shadow var(--switch-transition-duration) ease-in-out;

    width: var(--switch-width);
    height: var(--switch-height);
    background-color: var(--switch-background-color);

    border-style: solid;
    border-width: 1px;
    border-color: var(--switch-border-color);
    border-radius: var(--switch-border-radius);
    
    transition: var(--switch-transition);
}

input[type=checkbox].switch.switch-lg {
    --switch-width: 45px;
    --switch-height: 25px;
    --switch-border-radius: 50px;
}

input[type=checkbox].switch:disabled {
    cursor: not-allowed;
    --switch-background-color: var(--base-stroke);
}

input[type=checkbox].switch:checked {
    --switch-background-color: var(--primary-200);
    --switch-border-color: var(--primary-500);
}

input[type=checkbox].switch:disabled:checked {
    cursor: not-allowed;
    --switch-background-color: var(--primary-100);
    --switch-border-color: var(--primary-300);
}

input[type=checkbox].switch::after {
    content: '';

    position: absolute;
    pointer-events: none;
    top: 50%;
    left: 4px;
    transform: translate(0, -50%);

    --switch-circle-size: calc(var(--switch-height) - (2 * 4px) + 0.5px);
    --switch-circle-background-color: var(--primary-200);
    --switch-circle-transition: transform var(--switch-transition-duration) ease-in-out,
        background-color var(--switch-transition-duration) ease-in-out,
        border-color var(--switch-transition-duration) ease-in-out,
        box-shadow var(--switch-transition-duration) ease-in-out;

    width: var(--switch-circle-size);
    height: var(--switch-circle-size);
    background-color: var(--switch-circle-background-color);
    border-radius: 50%;
    transition: var(--switch-circle-transition);
}

input[type=checkbox].switch:disabled:after {
    --switch-circle-background-color: var(--primary-100);
}

input[type=checkbox].switch:checked:after {
    transform: translate(100%, -50%);
    --switch-circle-background-color: var(--primary-500);
}

input[type=checkbox].switch:disabled:checked:after {
    --switch-circle-background-color: var(--primary-300);
}