@spaceX: 16px;
@spaceY: 8px;
@labelWidth: 92px;
@minWidth: (1366px - 160px - 4 * @space-h + @spaceX) / 4;
@maxWidth: (1920px - 200px - 4 * @space-h + @spaceX) / 5;

.wrapper() {
  margin-right: (-@spaceX / 2);
  margin-left: (-@spaceX / 2);
}

.row() {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.col(@colSpan: 6) {
  flex-shrink: 0;
  flex-wrap: nowrap;
  width: percentage((@colSpan / 24));
  min-width: (@colSpan / 6 * @minWidth);
  max-width: (@colSpan / 6 * @maxWidth);
  padding: 0 (@spaceX / 2);
}

.@{prefixCls}-form {
  &-layout {
    --@{prefixCls}-form-label-width: @labelWidth;

    min-width: (@minWidth - @spaceX);

    .@{ant-prefix}-form-item {
      flex-wrap: nowrap;
      margin-bottom: @spaceY;

      &-label {
        flex: 0 0 ~'var(--@{prefixCls}-form-label-width)';
        min-width: 0;
        overflow: visible;
        line-height: 1;
        white-space: normal;
      }

      &-label > label::after {
        margin: 0 8px 0 0;
        content: '';
      }

      &-required::before {
        position: absolute;
        left: -8px;
      }

      &-with-help &-explain {
        margin-bottom: -@spaceY;
      }

      &-control {
        flex: 1 1 0;
        min-width: 0;
      }

      &-explain-error {
        margin-top: 2px;
      }
    }

    &-row {
      .wrapper();
      .row();

      & > .@{ant-prefix}-form-item {
        .col();
      }
    }

    &-column {
      .wrapper();

      & > .@{ant-prefix}-form-item {
        .col(8);
      }
    }

    &:last-child &-row,
    &:last-child &-column {
      margin-bottom: -@spaceY;
    }
  }

  &-layout-flex > div > .@{ant-prefix}-form-item,
  &-layout-flex &-col {
    width: 100%;
    min-width: unset;
    max-width: unset;
  }

  &-row {
    .row();
  }

  &-col {
    .col();
  }

  each(range(24), {
    &-col-@{value} {
      .col(@value);
    }

    &-layout-flex &-col-@{value} {
      width: percentage((@value / 24));
    }
  });
}

@media (max-width: 575px) {
  .@{prefixCls}-form-layout .@{ant-prefix}-form-item {
    flex-wrap: wrap;
  }
}