.toggle-switch {
    --bar-height: 14px;
    --bar-width: 32px;
    --bar-color: #eee;

    --knob-size: 20px;
    --knob-color: #fff;

    --switch-offset: calc(var(--knob-size) - var(--bar-height));
    --switch-width: calc(var(--bar-width) + var(--switch-offset));

    --transition-duration: 200ms;

    --switch-transition: all var(--transition-duration) ease-in-out;
    --switch-theme-rgb: 26, 115, 232;
    --switch-theme-color: rgb(var(--switch-theme-rgb));
    --switch-box-shadow: 0 0 var(--switch-offset) #11111180;
    --switch-margin: 8px;

    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;

    min-height: var(--bar-height);
    min-width: var(--bar-width);

    margin: var(--switch-margin);
    user-select: none;
}

.toggle-switch.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.toggle-switch > input,
.toggle-switch-input {
    opacity: 0;
    position: absolute;

    height: 0;
    width: 0;
}

.toggle-switch > label,
.toggle-switch-label {
    --knob-x: calc((var(--bar-height) - var(--bar-width)) / 2);

    box-sizing: border-box;
    position: relative;

    height: var(--bar-height);
    width: var(--bar-width);

    display: inline-flex;
    justify-content: center;
    align-items: center;

    margin: var(--switch-margin);
    user-select: none;
}

/* checked */
.toggle-switch > :checked + label,
:checked + .toggle-switch-label {
    --knob-x: calc((var(--bar-width) - var(--bar-height)) / 2);
}

/* bar */
.toggle-switch > label::before,
.toggle-switch-label::before {
    content: "";
    box-sizing: border-box;

    height: var(--bar-height);
    width: var(--bar-width);

    opacity: 0.5;

    background: var(--bar-color);

    border-radius: var(--bar-height);
    border: 1px solid var(--switch-theme-color);

    transition: var(--switch-transition);
}

/* checked bar */
.toggle-switch > :checked + label::before,
:checked + .toggle-switch-label::before {
    background: var(--switch-theme-color);
}

/* knob */
.toggle-switch > label::after,
.toggle-switch-label::after {
    content: "";
    box-sizing: border-box;

    position: absolute;

    height: var(--knob-size);
    width: var(--knob-size);

    background: var(--knob-color);

    border-radius: 50%;
    box-shadow: var(--switch-box-shadow);

    transform: translateX(var(--knob-x));
    transition: var(--switch-transition);
}

/* checked knob */
.toggle-switch > :checked + label::after,
:checked + .toggle-switch-label::after {
    background: var(--switch-theme-color);
}

/* hover & focus knob */
.toggle-switch > :focus + label::after,
:focus + .toggle-switch-label::after,
.toggle-switch:hover > label::after,
:hover > .toggle-switch-label::after {
    box-shadow: var(--switch-box-shadow), 0 0 0 calc(var(--knob-size) / 2) rgba(var(--switch-theme-rgb), 0.2);
}