// Input boxes
.form-control {
    &.is-invalid {
        padding-right: 0.75rem !important;
        background-image: none;
    }
}
select.form-control.is-invalid {
    padding-right: 0.75rem !important;
}

.form-control.is-invalid.warning {
    border-color: $validation-border-warning;

    &:focus {
        border-color: $validation-border-warning;
        box-shadow: $validation-shadow-warning;
    }
}
.form-control.is-invalid.info {
    border-color: $validation-border-info;

    &:focus {
        border-color: $validation-border-info;
        box-shadow: $validation-shadow-info;
    }
}
.form-control.is-invalid.busy {
    border-color: $validation-border-info;

    &:focus {
        border-color: $validation-border-info;
        box-shadow: $validation-shadow-info;
    }
}

// Autocomplete drop down
.react-select-bs {
    &.is-invalid.error {
        .react-select-bs__control {
            border-color: $validation-color-error;
            
            &.react-select-bs__control--is-focused {
                box-shadow:  $validation-shadow-error;
            }
        }
    }
    &.is-invalid.warning {
        .react-select-bs__control {
            border-color: $validation-color-warning;
            
            &.react-select-bs__control--is-focused {
                box-shadow:  $validation-shadow-warning;
            }
        }
    }
    &.is-invalid.info {
        .react-select-bs__control {
            border-color: $validation-color-info;
            
            &.react-select-bs__control--is-focused {
                box-shadow:  $validation-shadow-info;
            }
        }
    }
}

// Text below input boxes
.invalid-feedback {

    &.error {
        color: $validation-color-error;
    }
    
    &.warning {
        color: $validation-color-warning;
    }
    
    &.info {
        color: $validation-color-info;
    }
    
    &.busy {
        color: $validation-color-info;
    }

    span {
        margin-right: 5px;
    }

    span.spinner-grow {
        color: $validation-color-info;
        display: inline-block;
        width: 1rem;
        height: 1rem;
        vertical-align: text-bottom;
        background-color: currentColor;
        border-radius: 50%;
        opacity: 0;
        animation: spinner-grow 1s linear infinite;
    }
}

// Validation tooltips
.neo-tooltip {
    &.error {
        background-color: $validation-color-error;
    }
    &.warning {
        background-color: $validation-color-warning;
    }
    &.info {
        background-color: $validation-color-info;
    }
    &.busy {
        background-color: $validation-color-info;
    }
}

// Validation summary
.validation-summary {
    .validation-summary-model {
        margin-top: 10px;

        .validation-summary-model-body {
            margin-left: 20px;

            .validation-summary-model-rules {
                font-size: 0.85rem;
            }

            &.no-title {
                margin-left: 0;
            }
        }

        .error {
            color: $validation-color-error;
        }
        .warning {
            color: $validation-color-warning;
        }
        .info {
            color: $validation-color-info;
        }
        .busy {
            color: $validation-color-info;
        }
    }
}

.neo-error-modal-body {
    display: flex;
    white-space: pre-wrap;
    overflow-wrap: anywhere;

    .neo-error-modal-body-icon {
        padding-right: 10px;
    }
    i {
        color: $danger;
    }
    ul {
        padding-left: 0;
        margin-top: 15px;
    }
}
.neo-error-modal-info {
    font-size: 11px;
    font-family: monospace;
}