.form-control {
    border: $input-border-width solid $input-border-color;

    // Customize the `:focus` state to imitate native WebKit styles.
    @include form-control-focus();

    // Thy Custom
    @include set-input-hover-border($input-hover-border-color);
}

@include form-validation-state('invalid', $form-feedback-invalid-color);

input[type='radio'],
input[type='checkbox'] {
    border: solid 1px $input-form-check-border-color;

    &:disabled {
        &::before,
        &::after {
            background: $input-form-check-disable-color;
        }
    }

    &:checked {
        &:not(:disabled) {
            border-color: $primary;
            &::before,
            &::after {
                background: $primary;
            }
        }
        &:disabled {
            &::before,
            &::after {
                background: $input-form-check-disable-color;
            }
        }
    }

    &:not(:disabled) {
        @include hover {
            border-color: $primary;
        }
    }

    &:after {
        color: $primary;
    }
}

// checkbox
input[type='checkbox'] {
    &:before {
        background: $primary;
    }
    &:after {
        background: $primary;
    }
}

//radio
input[type='radio'] {
    &:after {
        background: $primary;
    }
}
