// scss-lint:disable QualifyingElement, VendorPrefix





// Form groups
//
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.

.#{$form-prefix-cls}-group {
  $root:#{&};
  margin-bottom: $form-group-margin-bottom;
  flex-wrap: nowrap;

  .#{$form-prefix-cls}-group {
    margin-bottom:0 !important;
  }

  .#{$form-prefix-cls}--label-left &,
  .#{$form-prefix-cls}--label-right &{
    // Prevent shorter elements from growing to same height as others (e.g., radio、 checkbox、 switch、 form-group__label)
    align-items: center;
  }

  &__label{
    display: block;
    font-size:$form-group-label-font-size;
    color:$gray-dark;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    .#{$form-prefix-cls}--label-left &,
    .#{$form-prefix-cls}--label-right &{
      margin-bottom: 0; // Override the `<label>` default
      line-height: $input-height;
      align-self: flex-start;
    }
    .#{$form-prefix-cls}--label-left &{
      text-align: left;
    }
    .#{$form-prefix-cls}--label-right &{
      text-align: right;
      &:after{
        display: none;
      }
      &:before{
        display: inline-block;
      }
    }

    &--sm{
      font-size:$form-group-label-font-size-sm;
      .#{$form-prefix-cls}--label-left &,
      .#{$form-prefix-cls}--label-right &{
        line-height: $input-height-sm;
      }
    }

    &--lg{
      font-size:$form-group-label-font-size-lg;
      .#{$form-prefix-cls}--label-left &,
      .#{$form-prefix-cls}--label-right &{
        line-height: $input-height-lg;
      }
    }

    .#{$form-prefix-cls}--sm & {
      font-size:$form-group-label-font-size-sm;
      line-height: $input-height-sm;
    }

    .#{$form-prefix-cls}--lg & {
      font-size:$form-group-label-font-size-lg;
      line-height: $input-height-lg;
    }

    .#{$form-prefix-cls}--label-top & {
      line-height: $line-height-base;
    }

  }

  &__content{
    position:relative;

    .#{$form-prefix-cls}--label-left &,
    .#{$form-prefix-cls}--label-right &{
      flex: 1;
      min-width: 0;
    }
  }

  &--required{
    #{$root}__label{
      &:after,
      &:before{
        content: "*";
        display: inline-block;
        margin-left: 4px;
        line-height: 1;
        font-size: $font-size-xs;
        color: $brand-danger;
      }
      &:before{
        display: none;
        margin-left:0;
        margin-right:4px;
      }
      .#{$form-prefix-cls}--label-right &{
        &:after{
          display: none;
        }
        &:before{
          display:inline-block;
        }
      }
    }
  }

}




// Form feedback states
//
// Apply contextual and semantic states to individual form controls.
.#{$form-prefix-cls}-feedback {
  position: absolute;
  top: 100%;
  padding-top: $form-text-margin-top;
  font-size:$font-size-xs;
  line-height: 1;
}

.has-success,
.has-warning,
.has-danger,
.verificating {
  .input-wrapper,
  .select {
    &::after{
      @extend %aid-icon;
      position: absolute;
      top: 50%;
      right: $input-padding-x;
      z-index: 3;
      font-size: $input-font-size;
      cursor: pointer;
      transform: translate(0,-50%);
      .#{$input-prefix-cls}-group--sm &{
        font-size: $input-font-size-sm;
      }
      .#{$input-prefix-cls}-group--lg &{
        font-size: $input-font-size-lg;
      }
    }
  }

  .select .aid-chevron-down {
    display: none;
  }
}

// Form validation states
.has-success {
  @include form-control-validation($brand-success);

  /*.#{$form-prefix-cls}-feedback{
    &::before{
      content:"\F27A";
    }
  }*/
  .select,
  .input-wrapper {
    &::after{
      content:"\F27A";
      color: $brand-success
    }
  }
}

.has-warning {
  @include form-control-validation($brand-warning);

  /*.#{$form-prefix-cls}-feedback{
    &::before{
      content:"\F132";
    }
  }*/

  .select,
  .input-wrapper {
    &::after{
      content:"\F4E8";
      color: $brand-warning
    }
  }
}

.has-danger {
  @include form-control-validation($brand-danger);

  /*.#{$form-prefix-cls}-feedback{
    &::before{
      content:"\F4E6";
    }
  }*/

  .select,
  .input-wrapper {
    &::after{
      content:"\F4E8";
      color: $brand-danger
    }
  }
}

.verificating {
  /*.#{$form-prefix-cls}-feedback{
    &::before{
      content:"\F4E6";
    }
  }*/

  .select,
  .input-wrapper {
    &::after{
      content:"\F6AC";
      color: $gray
    }
  }
}


// Inline forms
//
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
// forms begin stacked on extra small (mobile) devices and then go inline when
// viewports reach <768px.
//
// Requires wrapping inputs and labels with `.form-group` for proper display of
// default HTML form controls and our custom form controls (e.g., input groups).

.#{$form-prefix-cls}-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)


  // Kick in the inline
  @include media-breakpoint-up(sm) {
    label {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0;
      margin-right:$form-inline-group-label-gutter;
    }

    // Inline-block all the things for "inline"
    .#{$form-prefix-cls}-group {
      display: flex;
      flex: 0 0 auto;
      flex-flow: row wrap;
      align-items: center;
      margin-bottom: 0;
      margin-right:$form-inline-group-gutter;
    }

    // Allow folks to *not* use `.form-group`
    .#{$input-prefix-cls} {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }


    .#{$input-prefix-cls}-group {
      width: auto;
    }

    .#{$form-prefix-cls}-group__label {
      margin-bottom: 0;
      vertical-align: middle;
    }

    // Re-override the feedback icon.
    .has-feedback .#{$form-prefix-cls}-feedback {
      top: 0;
    }
  }
}

//form-size
.#{$form-prefix-cls}--sm{
  @include form-size('sm');
}

.#{$form-prefix-cls}--lg{
  @include form-size('lg');
}