.toggle-switch {
    --width: 60px;
    --height: 22px;
    position: relative;
    display: inline-block;
    width: var(--width);
    height: var(--height);
    border-radius: var(--height);
}

    .toggle-switch .toggle-switch-input {
        display: none;
    }

    .toggle-switch .toggle-switch-slider {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: var(--height);
        background-color: #ccc;
        transition: all 0.4s ease-in-out;
    }

        .toggle-switch .toggle-switch-slider::before {
            content: '';
            position: absolute;
            width: calc(var(--height));
            height: calc(var(--height));
            border-radius: calc(var(--height) / 2);
            background-color: #fff;
            box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
            transition: all 0.4s ease-in-out;
        }

    .toggle-switch .toggle-switch-input:checked + .toggle-switch-slider {
        background-color: #0d6efd;
    }

        .toggle-switch .toggle-switch-input:checked + .toggle-switch-slider::before {
            transform: translateX(calc(var(--width) - var(--height)));
        }

    .toggle-switch .toggle-switch-label {
        position: absolute;
        top: 3px;
        width: 100%;
        font-size: 12px;
        transition: all 0.4s ease-in-out;
    }

        .toggle-switch .toggle-switch-label::after {
            content: attr(data-off);
            position: absolute;
            right: 5px;
            opacity: 1;
            transition: all 0.4s ease-in-out;
        }

        .toggle-switch .toggle-switch-label::before {
            content: attr(data-on);
            position: absolute;
            left: 5px;
            color: #ffffff;
            opacity: 0;
            transition: all 0.4s ease-in-out;
        }

    .toggle-switch .toggle-switch-input:checked ~ .toggle-switch-label::after {
        opacity: 0;
    }

    .toggle-switch .toggle-switch-input:checked ~ .toggle-switch-label::before {
        opacity: 1;
    }