@import '../../style/themes';
@import '../../style/mixins';

.x-form {
  @include reset-component();
}

.x-form-item {
  display: flex;
  margin-bottom: $margin-lg;

  &-vertical {
    flex-direction: column;
    margin-bottom: $margin-sm;
  }
  &-vertical &_label {
    justify-content: flex-start;
  }

  
  &-required &_label {
    &::before {
      content: '*';
      margin-right: $margin-xss;
      font-family: SimSun,sans-serif;
      color: $error-color;
    }
  }

  &_label {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 80px;
    height: $form-item-label-height;
    padding-right: $padding-sm;
    box-sizing: border-box;
  }

  &_wrapper {
    flex: 1;
  }

  &_input {
    display: flex;
    align-items: center;
    min-height: $form-item-label-height;
  }
  
  &_feedback {
    // min-height: $form-item-feedback-height;
    color: $error-color;
    &_line {
      min-height: $form-item-feedback-height;
    }
  }
  &_extra {
    color: $text-color-secondary;
  }
}