@include b(form-item-container) {
  @include set-component-css-var('form-item-container', $form-item-container);
}

@include b(form-item-container) {
  width: 100%;
  height: 100%;
  @include e(label) {
    @include utils-ellipsis;

    padding-top: calc(
      (
          #{getCssVar('form-item-container', 'line-height')} - #{getCssVar(
              'form-item',
              'font-size'
            )}
        ) / 2
    );
    padding-bottom: calc(
      (
          #{getCssVar('form-item-container', 'line-height')} - #{getCssVar(
              'form-item',
              'font-size'
            )}
        ) / 2
    );
    line-height: #{getCssVar('form-item', 'font-size')};
  }

  padding-right: getCssVar('padding-right');
  padding-bottom: getCssVar('padding-bottom');

  @include m((left, right)) {
    min-height: #{getCssVar('form-item-container', 'line-height')};
    line-height: #{getCssVar('form-item-container', 'line-height')};

    @include e(label) {
      flex-shrink: 0;
      width: #{getCssVar('form-item-container', 'label-width')};
    }

    @include e(editor) {
      flex-grow: 1;
    }
  }

  @include m(left) {
    @include e(label) {
      padding-right: 10px;
      text-align: right;
    }
  }

  @include m(right) {
    @include e(label) {
      padding-left: 10px;
      text-align: left;
    }
  }

  @include when(required) {
    @include e(label) {
      &::before {
        display: inline-block;
        margin-right: 4px;
        /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
        font-family: SimSun;
        font-size: 14px;
        line-height: 1;
        color: #ed4014;
        content: '*';
      }
    }
  }
}

.#{bem('form-item-container', '', 'left')},
.#{bem('form-item-container', '', 'right')} {
  .#{bem('form-item-container-content')} {
    @include flex;
  }
}

@include b(form-item-container-error) {
  padding-top: 6px;
  padding-left: #{getCssVar('form-item-container', 'label-width')};
  color: #{getCssVar('form-item', 'error-color')};
}
