@form-class: ~'@{icecream-prefix}-form';
@form-body-class: ~'@{icecream-prefix}-form-body';
@form-footer-class: ~'@{icecream-prefix}-form-footer';
@form-item-class: ~'@{icecream-prefix}-form-item';
@form-item-label-class: ~'@{icecream-prefix}-form-item-label';
@form-item-body-class: ~'@{icecream-prefix}-form-item-body';
@form-item-content-class: ~'@{icecream-prefix}-form-item-content';
@form-item-extra-class: ~'@{icecream-prefix}-form-item-extra';
@form-item-validate-message-class: ~'@{icecream-prefix}-form-item-validate-message';
@form-item-tip-class: ~'@{icecream-prefix}-form-item-tip';
@form-in-drawer-class: ~'@{icecream-prefix}-form-in-drawer';

.@{form-class} {
  .extendBase();

  &-layout-inline {
    display: flex;
    flex-direction: row;

    .@{form-body-class} {
      flex: 1 1 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .@{form-footer-class} {
      flex: 0 0 auto;
      margin-left: 28px;
    }

    .@{form-item-class}:not(:last-child) {
      margin-right: 28px;
    }
  }

  &-size-small {
    .setFontSize(@icecream-font-size-sm);
  }

  &-size-default {
    .setFontSize(@icecream-font-size-md);
  }

  &-size-large {
    .setFontSize(@icecream-font-size-md);
  }
}

.labelOfSize(@input-height, @font-size) {
  .setFontSize(@font-size);

  // horizontal 布局下：
  // `label-vertical-align: input` 需要额外的边距
  // `label-vertical-align: text` 不需要额外的边距
  .@{form-item-class}-layout-horizontal&-vertical-align-input,
  // inline 布局下总是添加额外的边距以确保行高为 @input-height
  .@{form-item-class}-layout-inline& {
    @content-line-height: getIcecreamLineHeightByPx(@font-size);
    @padding-y: (@input-height - @content-line-height) / 2;
    padding-top: @padding-y;
    padding-bottom: @padding-y;
  }
}

// 必填（required）对应的星号样式
.required-mark() {
  content: "\002a";
  width: 8px;
  text-align: center;
  color: @icecream-error-color;
}

.@{form-item-class} {
  .extendBase();

  &:not(&-layout-inline):last-child {
    // `FormItem` 的 `margin-bottom` 由组件通过 `style` 控制，这里须得通过 `!important` 才能覆盖之
    margin-bottom: 0 !important;
  }

  .@{form-item-label-class} {
    .extendBase();
    color: @icecream-bold-color;

    &-required::after {
      .required-mark();
      margin-left: 4px;
    }
  }

  .@{form-item-validate-message-class} {
    .extendBase();
    min-height: 0;
    color: @icecream-error-color;
    opacity: 0;
  }

  .@{form-item-tip-class} {
    .extendBase();
    margin-top: @icecream-gap-xs;
    color: @icecream-color-grey-8;
  }

  &-size-small .@{form-item-label-class} {
    .labelOfSize(@icecream-form-input-height-sm, @icecream-font-size-sm);
  }

  &-size-default .@{form-item-label-class} {
    .labelOfSize(@icecream-form-input-height-md, @icecream-font-size-md);
  }

  &-size-large .@{form-item-label-class} {
    .labelOfSize(@icecream-form-input-height-lg, @icecream-font-size-md);
  }

  &-size-small {
    .setFontSize(@icecream-font-size-sm);
    .@{form-item-tip-class} {
      .setFontSize(@icecream-font-size-sm);
    }
  }

  &-size-default {
    .setFontSize(@icecream-font-size-md);
    .@{form-item-tip-class} {
      .setFontSize(@icecream-font-size-sm);
    }
  }

  &-size-large {
    .setFontSize(@icecream-font-size-md);
    .@{form-item-tip-class} {
      .setFontSize(@icecream-font-size-md);
    }
  }

  &-layout-horizontal {
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    .@{form-item-label-class} {
      flex: 0 0 auto;
      position: relative; // required 的星号相对其定位

      &-required::after {
        position: absolute;
      }

      &-align-right {
        text-align: right;

        &.@{form-item-label-class}-required {
          &::after {
            content: none;
          }
          &::before {
            .required-mark();
            margin-right: 4px;
          }
        }
      }
    }

    .@{form-item-body-class} {
      flex: 1 1 0;
    }
  }

  &-layout-vertical .@{form-item-label-class} {
    margin-bottom: @icecream-gap-xs;
  }

  &-layout-inline {
    display: flex;
    flex-direction: row;
    align-items: center;

    .@{form-item-body-class} {
      position: relative;
    }
    .@{form-item-content-class} {
      // 为了避免视觉上 checkbox 项之间距离比 label & checkbox 间的距离还远，
      // 这里给第一个 checkbox 添加一个额外的 margin-left；radio 同理
      > .@{checkbox-prefix-cls}:first-child, > .@{radio-prefix-cls}:first-child {
        margin-left: 20px;
      }
    }
    .@{form-item-extra-class} {
      position: absolute;
    }
  }

  .@{form-item-extra-class}-error {
    .@{form-item-validate-message-class} {
      min-height: 4px; // 避免 message 显示/隐藏时下方的 tip 抖动
      margin-top: @icecream-gap-xs;
      opacity: 1;
    }
    .@{form-item-tip-class} {
      margin-top: 4px;
    }
  }

  &-layout-inline&-validate-status-error .@{form-item-validate-message-class} {
    margin-top: 0;
  }
}

.@{form-footer-class} {
  display: flex;
  flex-wrap: wrap;

  &-label-placeholder {
    // 样式同 horizontal 布局下的 form-item-label
    flex: 0 0 auto;
  }

  &-content {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
  }

  &-align-left {
    justify-content: flex-start;
  }

  &-align-right {
    justify-content: flex-end;
  }

  .@{button-prefix} + .@{button-prefix} {
    margin-left: @icecream-gap-sm;
  }
}

.@{form-in-drawer-class}, .@{form-in-drawer-class} .@{form-body-class} {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: hidden;
}