@import (reference) '../../style/themes/index.less';
@import '../../style/mixins/hairline.less';

.formItemLabelHorizontal() {
  width: 170 * @rpx;
  margin-right: 24 * @rpx;
  color: @COLOR_TEXT_SECONDARY;
  font-size: 34 * @rpx;
  line-height: 48 * @rpx;
}

.formItemLabelVertical() {
  font-size: 34 * @rpx;
  line-height: 42 * @rpx;
  color: @COLOR_TEXT_SECONDARY;
  margin-bottom: 8 * @rpx;
}

.formItemContentHorizontal() {
  display: flex;
  align-items: center;
}

.formItemFieldHorizontal() {
  text-align: right;
}

@formItemPrefix: ant-form-item;

.@{formItemPrefix} {
  background-color: @COLOR_CARD;
  padding: 24 * @rpx 24 * @rpx 24 * @rpx 32 * @rpx;
  position: relative;
  .hairline('bottom');

  &-line {
    display: flex;
    flex: 1;
    align-items: center;
    align-self: stretch;
    max-width: 100%;
    position: relative;
  }

  &-content {
    flex: 1;

    &-horizontal {
      .formItemContentHorizontal();
    }
  }

  &-error-info {
    font-size: 13px;
    color: @COLOR_RED;
    line-height: 37 * @rpx;
    text-align: left;
    margin-top: 8 * @rpx;
  }

  &-help-info {
    font-size: 13px;
    color: @COLOR_TEXT_SECONDARY;
    line-height: 37 * @rpx;
    text-align: left;
    margin-top: 8 * @rpx;
  }

  &-label {
    display: flex;
    align-items: center;
    font-size: 34 * @rpx;
    line-height: 48 * @rpx;
    overflow: visible;
    position: relative;

    &-text {
      display: flex;
      align-items: center;
      position: relative;
    }

    &-help-content {
      font-size: 30 * @rpx;
      text-align: center;
      white-space: nowrap;
    }

    &-horizontal {
      .formItemLabelHorizontal();
    }

    &-vertical {
      .formItemLabelVertical();
    }
  }

  &-field {
    flex: 1;

    &-horizontal {
      .formItemFieldHorizontal();
    }
  }

  // &-other {
  //   display: flex;
  //   align-items: center;
  // }

  &-extra {
    display: flex;
    align-items: center;
    font-size: 32 * @rpx;
    color: @COLOR_TEXT_ASSIST;
  }

  &-asterisk {
    .@{formItemPrefix}-label-required .@{formItemPrefix}-label-text {
      &::before {
        content: '*';
        position: absolute;
        left: -18 * @rpx;
        font-size: 30 * @rpx;
        color: @COLOR_TEXT_WARNING;
      }
    }
  }

  &-text-required {
    .@{formItemPrefix}-label-required .@{formItemPrefix}-label-text {
      &::after {
        padding-left: 4 * @rpx;
        content: '(必填)';
        display: block;
        left: -18 * @rpx;
        font-size: 30 * @rpx;
        color: @COLOR_TEXT_WEAK;
      }
    }
  }

  &-text-optional {
    .@{formItemPrefix}-label .@{formItemPrefix}-label-text {
      &::after {
        padding-left: 4 * @rpx;
        content: '(选填)';
        display: block;
        left: -18 * @rpx;
        font-size: 30 * @rpx;
        color: @COLOR_TEXT_WEAK;
      }
    }

    .@{formItemPrefix}-label-required .@{formItemPrefix}-label-text {
      &::after {
        content: none;
      }
    }
  }
}