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

  &.row {
    margin-right: -4px;
    margin-left: -4px;
    > [class*="col"] {
      padding-right: 4px;
      padding-left: 4px;
    }
  }

  .#{$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;
    overflow: hidden;
    font-size: $form-group-label-font-size;
    font-weight: 400;
    color: $gray-light-65;
    white-space: nowrap;

    .#{$form-prefix-cls}--label-left &, .#{$form-prefix-cls}--label-right & {
      align-self: flex-start;
      margin-bottom: 0; // Override the `<label>` default
      line-height: $input-height;
    }

    .#{$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;
    .dropdown {
      width: 100%;
    }
  }

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

      &::before {
        display: none;
        margin-right: 4px;
        margin-left: 0;
      }

      .#{$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;
    margin-right: .3em;
    font-size: $font-size-xs;
  }
}


// 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: "\F12C";
    }
  }
}


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


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

    // 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-right: $form-inline-group-gutter;
      margin-bottom: 0;
    }

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

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

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