Bootstrap/scss/mixins/_forms.scss

@use "../functions";
@use "../variables";
@use "../vendor/rfs";
@use "border-radius";
@use "box-shadow";

// This mixin uses an `if()` technique to be compatible with Dart Sass
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details

// scss-docs-start form-validation-mixins
@mixin form-validation-state-selector($state) {
  @if ($state == "valid" or $state == "invalid") {
    .was-validated #{if(&, "&", "")}:#{$state},
    #{if(&, "&", "")}.is-#{$state} {
      @content;
    }
  } @else {
    #{if(&, "&", "")}.is-#{$state} {
      @content;
    }
  }
}

@mixin form-validation-state(
  $state,
  $color,
  $icon,
  $tooltip-color: functions.color-contrast($color),
  $tooltip-bg-color: rgba($color, variables.$form-feedback-tooltip-opacity),
  $focus-box-shadow: 0 0 variables.$input-btn-focus-blur variables.$input-focus-width rgba($color, variables.$input-btn-focus-color-opacity),
  $border-color: $color
) {
  .#{$state}-feedback {
    display: none;
    width: 100%;
    margin-top: variables.$form-feedback-margin-top;
    @include rfs.font-size(variables.$form-feedback-font-size);
    font-style: variables.$form-feedback-font-style;
    color: $color;
  }

  .#{$state}-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    max-width: 100%; // Contain to parent when possible
    padding: variables.$form-feedback-tooltip-padding-y variables.$form-feedback-tooltip-padding-x;
    margin-top: .1rem;
    @include rfs.font-size(variables.$form-feedback-tooltip-font-size);
    line-height: variables.$form-feedback-tooltip-line-height;
    color: $tooltip-color;
    background-color: $tooltip-bg-color;
    @include border-radius.border-radius(variables.$form-feedback-tooltip-border-radius);
  }

  @include form-validation-state-selector($state) {
    ~ .#{$state}-feedback,
    ~ .#{$state}-tooltip {
      display: block;
    }
  }

  .form-control {
    @include form-validation-state-selector($state) {
      border-color: $border-color;

      @if variables.$enable-validation-icons {
        padding-right: variables.$input-height-inner;
        background-image: functions.escape-svg($icon);
        background-repeat: no-repeat;
        background-position: right variables.$input-height-inner-quarter center;
        background-size: variables.$input-height-inner-half variables.$input-height-inner-half;
      }

      &:focus {
        border-color: $border-color;
        @if variables.$enable-shadows {
          @include box-shadow.box-shadow(variables.$input-box-shadow, $focus-box-shadow);
        } @else {
          // Avoid using mixin so we can pass custom focus shadow properly
          box-shadow: $focus-box-shadow;
        }
      }
    }
  }

  // stylelint-disable-next-line selector-no-qualifying-type
  textarea.form-control {
    @include form-validation-state-selector($state) {
      @if variables.$enable-validation-icons {
        padding-right: variables.$input-height-inner;
        background-position: top variables.$input-height-inner-quarter right variables.$input-height-inner-quarter;
      }
    }
  }

  .form-select {
    @include form-validation-state-selector($state) {
      border-color: $border-color;

      @if variables.$enable-validation-icons {
        &:not([multiple]):not([size]),
        &:not([multiple])[size="1"] {
          --#{variables.$prefix}form-select-bg-icon: #{functions.escape-svg($icon)};
          padding-right: variables.$form-select-feedback-icon-padding-end;
          background-position: variables.$form-select-bg-position, variables.$form-select-feedback-icon-position;
          background-size: variables.$form-select-bg-size, variables.$form-select-feedback-icon-size;
        }
      }

      &:focus {
        border-color: $border-color;
        @if variables.$enable-shadows {
          @include box-shadow.box-shadow(variables.$form-select-box-shadow, $focus-box-shadow);
        } @else {
          // Avoid using mixin so we can pass custom focus shadow properly
          box-shadow: $focus-box-shadow;
        }
      }
    }
  }

  .form-control-color {
    @include form-validation-state-selector($state) {
      @if variables.$enable-validation-icons {
        width: calc(#{variables.$form-color-width} + #{variables.$input-height-inner});
      }
    }
  }

  .form-check-input {
    @include form-validation-state-selector($state) {
      border-color: $border-color;

      &:checked {
        background-color: $color;
      }

      &:focus {
        box-shadow: $focus-box-shadow;
      }

      ~ .form-check-label {
        color: $color;
      }
    }
  }
  .form-check-inline .form-check-input {
    ~ .#{$state}-feedback {
      margin-left: .5em;
    }
  }

  .input-group {
    > .form-control:not(:focus),
    > .form-select:not(:focus),
    > .form-floating:not(:focus-within) {
      @include form-validation-state-selector($state) {
        @if $state == "valid" {
          z-index: 3;
        } @else if $state == "invalid" {
          z-index: 4;
        }
      }
    }
  }
}
// scss-docs-end form-validation-mixins