// Bootstrap 4 likes to hide feedbacks, we don't like it, especially react-form-with-constraints-tools's DisplayFields
// [.invalid-feedback doesn't show for .input-group with an invalid control](https://github.com/twbs/bootstrap/issues/23454)
.valid-feedback,
.invalid-feedback {
  // stylelint-disable-next-line declaration-no-important
  display: block !important; // [Is there an opposite to display:none?](https://stackoverflow.com/a/37289654/990356)
}

// stylelint-disable max-nesting-depth

// [v4-beta form-validation-state() mixin does not work](https://github.com/twbs/bootstrap/issues/23371)
// [Fix form-validation-state() for unknown pseudo classes](https://github.com/twbs/bootstrap/pull/27409)
// [ability to generate warning form state](https://github.com/twbs/bootstrap/pull/26471)
// Taken and adapted from https://github.com/twbs/bootstrap/blob/v4.1.3/scss/mixins/_forms.scss#L29
// Commented lines: 'display: none' + '.was-validated &:#{$state}'
@mixin form-validation-state2($state, $color) {
  .#{$state}-feedback {
    //display: none;
    width: 100%;
    margin-top: $form-feedback-margin-top;
    font-size: $form-feedback-font-size;
    color: $color;
  }

  .#{$state}-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%; // Contain to parent when possible
    padding: $tooltip-padding-y $tooltip-padding-x;
    margin-top: 0.1rem;
    font-size: $tooltip-font-size;
    line-height: $line-height-base;
    color: color-yiq($color);
    background-color: rgba($color, $tooltip-opacity);
    @include border-radius($tooltip-border-radius);
  }

  .form-control,
  .custom-select {
    //.was-validated &:#{$state},
    &.is-#{$state} {
      border-color: $color;

      &:focus {
        border-color: $color;
        box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25);
      }

      ~ .#{$state}-feedback,
      ~ .#{$state}-tooltip {
        display: block;
      }
    }
  }

  .form-control-file {
    //.was-validated &:#{$state},
    &.is-#{$state} {
      ~ .#{$state}-feedback,
      ~ .#{$state}-tooltip {
        display: block;
      }
    }
  }

  .form-check-input {
    //.was-validated &:#{$state},
    &.is-#{$state} {
      ~ .form-check-label {
        color: $color;
      }

      ~ .#{$state}-feedback,
      ~ .#{$state}-tooltip {
        display: block;
      }
    }
  }

  .custom-control-input {
    //.was-validated &:#{$state},
    &.is-#{$state} {
      ~ .custom-control-label {
        color: $color;

        &::before {
          background-color: lighten($color, 25%);
        }
      }

      ~ .#{$state}-feedback,
      ~ .#{$state}-tooltip {
        display: block;
      }

      &:checked {
        ~ .custom-control-label::before {
          @include gradient-bg(lighten($color, 10%));
        }
      }

      &:focus {
        ~ .custom-control-label::before {
          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, 0.25);
        }
      }
    }
  }

  // custom file
  .custom-file-input {
    //.was-validated &:#{$state},
    &.is-#{$state} {
      ~ .custom-file-label {
        border-color: $color;

        &::after {
          border-color: inherit;
        }
      }

      ~ .#{$state}-feedback,
      ~ .#{$state}-tooltip {
        display: block;
      }

      &:focus {
        ~ .custom-file-label {
          box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25);
        }
      }
    }
  }
}

// https://github.com/twbs/bootstrap/blob/v4.1.3/scss/_variables.scss#L572
// $form-feedback-valid-color => $success => $green => #28a745
// $form-feedback-invalid-color => $danger => $red => #dc3545
$form-feedback-warning-color: theme-color('warning') !default; // $yellow => #ffc107
$form-feedback-info-color: theme-color('info') !default; // $cyan => #17a2b8

// https://github.com/twbs/bootstrap/blob/v4.1.3/scss/_forms.scss#L243
// The order matters: invalid should be the last to override the other CSS rules
// @include form-validation-state("valid", $form-feedback-valid-color);
// @include form-validation-state("invalid", $form-feedback-invalid-color);
@include form-validation-state2('info', $form-feedback-info-color);
@include form-validation-state2('warning', $form-feedback-warning-color);
@include form-validation-state2('valid', $form-feedback-valid-color);
@include form-validation-state2('invalid', $form-feedback-invalid-color);