.toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    cursor: pointer;

    &__input {
        opacity: 0;
        width: 0;
        height: 0;

        &:checked+.toggle-switch__slider {
            background-color: var(--primary);

            &:before {
                transform: translateX(20px);
                background-color: var(--primary-900);
            }
        }

        &:disabled+.toggle-switch__slider {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }

    &__slider {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--transp-1);
        border-radius: 26px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        &:before {
            content: '';
            position: absolute;
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: var(--primary);
            border-radius: 50%;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
    }
}