@mixin fback($status) {
    border-color: $status;

    ~ .feedback:not(:empty),
    ~ .feedback-wrapper .feedback:not(:empty),
    > .feedback:not(:empty) {
        display:block;
        color: $icenight;
        background-color: $status;

        &:before {
            border-bottom-color: $status;
        }
    }
}

.form-switch .form-check-input {
    border-radius: 12px;
}

.form-floating > label {
    color: #666666;
}

.form-select {
    background-image: url('https://static.icemortgagetechnology.com/icemt/assets/svg/em/dropdown-caret-black.svg');
}

.feedback-wrapper {
    position:relative;

    .feedback {
        width: calc(100% - 24px);
        margin: -6px 12px;
    }
}

.feedback {
    position: absolute;
    z-index: 1;
    margin: -6px 12px;
    padding: 6px 12px 4px;
    font-size: 12px;
    color: #ffffff;
    background-color: $icenight;
    width: calc(100% - 24px);
    display:none;

    &:before {
        content:'';
        position:absolute;
        border-style: solid;
        border-width: 0 5px 9px 5px;
        border-color: transparent transparent $icenight transparent;
        top:-8px;
        left:8px;
    }

    .feedback-close {
        position: absolute;
        right: 4px;
        top: 4px;
        width: 20px;
        height: 20px;
        line-height: 1;
        background-color: transparent;
        border: 0;
        margin: 0;
        padding: 0;

        &:focus {
            outline: 0;
        }
    }
}

.is-invalid {
    @include fback($danger);
}

.is-success {
    @include fback($success);
}
.is-info {
    @include fback($iceblue);
}

.is-warning {
    @include fback($warning);
}

.is-danger {
    @include fback($danger);
}

.is-invalid-base .feedback {
    display: block!important;
}