$form-name: $lib-name + "-form";
$form-item-name: $lib-name + "-form-item";

.#{$form-name} {
  .#{$form-item-name} {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    &::after {
      display: block;
      clear: both;
      content: "";
    }
    .#{$form-item-name}-label {
      text-align: right;
      vertical-align: middle;
      box-sizing: border-box;
      font-size: 14px;
      color: $sub-text-color-light;
      height: 32px;
      line-height: 32px;
      padding-right: 16px;
    }
    .#{$form-item-name}-content {
      .#{$lib-name}-radio-group,
      .#{$lib-name}-checkbox-group {
        line-height: 32px;
      }
      .#{$form-item-name}-error-tip {
        margin: 6px 0 0;
        font-size: 12px;
        color: $error-color;
      }
      &.form-item-error {
        .input-element.no-border {
          border-bottom-color: $error-color;
        }
        .input-element:not(.no-border) {
          border-color: $error-color;
        }
      }
    }
  }
  &.vertical-form-item {
    .#{$form-item-name} {
      flex-direction: column;
      .#{$form-item-name}-label {
        text-align: left;
        font-size: 12px;
        height: 20px;
        line-height: 20px;
      }
    }
  }
}