/* stylelint-disable no-descending-specificity */
.FormSwitch {
    padding-left: 28px;

    .custom-control-label {
        padding-left: var(--padding-medium-small);
        cursor: pointer;

        &::before {
            border: none;
            width: 28px;
            left: -28px;
            height: 16px;
            top: 2px;
            border-radius: 8px;
        }

        &::after {
            height: 12px;
            width: 12px;
            border-radius: 6px;
            left: -26px;
            top: 4px;
        }
    }

    &.zero-padding .custom-control-label {
        padding-left: 0;
    }

    .custom-control-input {
        &:checked ~ .custom-control-label::after {
            transform: translate(12px);
        }

        // Text
        + .custom-control-label {
            @include text-body;

            text-transform: none;
            color: var(--text-primary);
        }

        &:disabled + .custom-control-label {
            color: var(--text-primary-disabled);
            cursor: default;
        }

        // OFF state
        &:not(:disabled):not(:active):not(:checked) ~ .custom-control-label {
            --suite-switch-color: var(--gray-300);

            &::before {
                border-color: var(--suite-switch-color);
                background-color: var(--suite-switch-color);
            }

            &::after {
                background-color: white;
            }

            &:hover {
                --suite-switch-color: var(--gray-400);
            }
        }
        &:disabled:not(:checked) ~ .custom-control-label {
            &::before {
                background-color: var(--gray-150);
                border-color: var(--gray-150);
            }
            &::after {
                background-color: var(--gray-50);
            }
        }

        // ON state
        &:not(:disabled):active ~ .custom-control-label,
        &:not(:disabled):checked ~ .custom-control-label {
            --suite-switch-color: var(--midnight-650);

            &::before {
                border-color: var(--suite-switch-color);
                background-color: var(--suite-switch-color);
            }

            &:hover {
                --suite-switch-color: var(--midnight-750);
            }
        }
        &:disabled:checked ~ .custom-control-label {
            &::before {
                background-color: var(--gray-500);
                border-color: var(--gray-500);
            }
            &::after {
                background-color: var(--gray-50);
            }
        }
    }
}