// 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;

  .#{$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;
    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;
  }

  &--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;
  &::before{
    @extend %aid-icon;
    font-size:$font-size-xs;
    margin-right: .3em;
  }
}


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

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

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

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

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

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


// 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');
}

