@import (reference) '../theme/variables/antdVariables.less';
@form-prefix-cls: ~'@{ant-prefix}-form';
@form-item-prefix-cls: ~'@{form-prefix-cls}-item';

.ued-legacy-form-wrap {

  background-color: white;

  .form-tips .@{form-prefix-cls}-item-with-help {
    margin-bottom: 14px;
  }

  .formLabel-required {
    font-size: 12px;
    margin-right: 2px;
    color: #ff4d4f;
    position: relative;
    top: 1px;
    font-family: 'SimSun, sans-serif';
  }

  .formLabel-colon {
    margin-left: 2px;
    margin-right: 4px;
  }

  .formLabel-item-label {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;

    &-title {
      display: inline-block;
      max-width: calc(100%-16px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      
      &-label-wrap {
        white-space: unset;
        overflow-y: visible;
      }
    }

    &::after {
      content: ':';
      display: inline-block;
      width: 8px;
      text-align: center;
      margin-right: 8px;
    }

    &-no-colon {
      .formLabel-item-label-title { 
        max-width: 100%;
        padding-right: 8px;
      }
      &::after {
        display: none;
        content: '';
      }
    }
  }

  .explainHelp-line-height .@{form-item-prefix-cls}-explain {
    line-height: var(--explainHelp-Line-height);
  }
  
  .@{form-prefix-cls}-item {
    // height: 100%;
    margin-bottom: 0;
    div.@{form-prefix-cls}-item {
      height: auto;
    }
    &-label {
      line-height: 32px;

      & > label.@{form-prefix-cls}-item-required:not(.pcfactory-form-item-required-mark-optional)::before {
        margin-right: 2px;
        position: relative;
        top: 1px;
        font-size: @font-size-sm;
      }
    }

    &-control {
      display: block;
      // height: 100%;
      line-height: 0;

      &-wrapper:first-child {
        height: 100%;
      }
      // 表单校验提示出现时不影响布局
      .@{form-item-prefix-cls}-explain {
        position: relative;
        min-height: 0;
        &-error {
          position: absolute;
          top: 0;
          left: 0;
        }
      }

      &.has-error {
        .@{form-prefix-cls}-explain {
          position: absolute;
          height: @form-explain-height;
          margin-top: 0;
          font-size: @form-explain-font-size;
          line-height: @form-explain-height;
        }

        .@{ant-prefix}-picker {
          border-color: @error-color;
        }
      }

      .ued-rateContainer {
        line-height: 22px;
      }
    }
  }

  &.@{form-prefix-cls}-vertical {
    .@{form-prefix-cls}-item {
      // fix：在垂直布局时，渲染效果并没有更改，原因是表单上一直都有 labelCol和wrapperCol，导致垂直布局失效
      // 强制改为 column
      display: block;
      padding-bottom: 0;
      // 用于当表单内是布局容器，布局容器内表单控件的隐藏（因为存量数据有个block !important ）
      .@{form-prefix-cls}-item-hidden {
        display: none !important;
      }
      // 解决ie11 垂直布局高度没撑开问题
      .@{form-item-prefix-cls}-row {
        display: block;
      }
      .@{form-prefix-cls}-item-visibility {
        visibility: hidden;
        transform: opacity 0.3s ease;
        opacity: 0;
      }
      &-label {
        flex: 1;
        padding: 0;
      }

      &-control-wrapper {
        flex: 1;
      }
    }
  }

  .@{ant-prefix}-form-item-noLabel {
    & > .@{ant-prefix}-col-16 {
      max-width: initial;
    }
  }
}

// ================================================================
// =                             Item                             =
// ================================================================
.@{form-item-prefix-cls} {
  .reset-component();

  // margin-bottom: @form-item-margin-bottom;
  vertical-align: top;
  // We delay one frame (0.017s) here to let CSSMotion goes
  transition: margin-bottom @animation-duration-slow 0.017s linear;

  &-with-help {
    margin-bottom: 0;
    transition: none;
  }

  &-hidden,
  &-hidden.@{ant-prefix}-row {
    // https://github.com/ant-design/ant-design/issues/26141
    display: none;
  }

  // ==============================================================
  // =                            Label                           =
  // ==============================================================
  &-label {
    display: inline-block;
    flex-grow: 0;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
    margin-bottom: -4px;

    &-left {
      text-align: left;
    }

    &-wrap {
      overflow: visible;
      line-height: (@line-height-base - 0.25em);
      white-space: normal;
    }

    > label {
      position: relative;
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      height: @form-item-label-height;
      color: @label-color;
      font-size: @form-item-label-font-size;

      > .@{iconfont-css-prefix} {
        font-size: @form-item-label-font-size;
        vertical-align: top;
      }

      // Required mark
      &.@{form-item-prefix-cls}-required:not(.@{form-item-prefix-cls}-required-mark-optional)::before {
        display: inline-block;
        margin-right: 4px;
        color: @label-required-color;
        font-size: @form-item-label-font-size;
        font-family: SimSun, sans-serif;
        line-height: 1;
        content: '*';

        .@{form-prefix-cls}-hide-required-mark & {
          display: none;
        }
      }

      // Optional mark
      .@{form-item-prefix-cls}-optional {
        display: inline-block;
        margin-left: @margin-xss;
        color: @text-color-secondary;

        .@{form-prefix-cls}-hide-required-mark & {
          display: none;
        }
      }

      // Optional mark
      .@{form-item-prefix-cls}-tooltip {
        color: @text-color-secondary;
        cursor: help;
        writing-mode: horizontal-tb;
        margin-inline-start: @margin-xss;
      }

      &::after {
        display: none;
        content: '';
      }

      &.@{form-item-prefix-cls}-no-colon::after {
        content: ' ';
      }
    }
  }

  // ==============================================================
  // =                            Input                           =
  // ==============================================================
  &-control {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    &:first-child:not([class^=~"'@{ant-prefix}-col-'"]):not([class*=~"' @{ant-prefix}-col-'"]) {
      width: 100%;
    }

    &.has-error {
      .@{ant-prefix}-select-selector {
        background-color: #fff;
        border-color: @error-color;
      }
    }
  }

  &-control-input {
    position: relative;
    display: flex;
    align-items: center;
    min-height: @input-height-sm !important;

    &-content {
      flex: auto;
      max-width: 100%;
    }
  }

  // ==============================================================
  // =                           Explain                          =
  // ==============================================================
  &-explain,
  &-extra {
    clear: both;
    color: @text-color-secondary;
    font-size: @font-size-base;
    line-height: @line-height-base;
    transition: color 0.3s @ease-out; // sync input color transition
    .explainAndExtraDistance((@form-item-margin-bottom - @form-font-height) / 2);
  }

  &-explain-connected {
    height: 0;
    min-height: 0;
    opacity: 0;
  }

  &-extra {
    min-height: @form-item-margin-bottom;
  }

  .@{ant-prefix}-input-textarea-show-count {
    &::after {
      margin-bottom: -22px;
    }
  }

  &-with-help &-explain {
    height: auto;
    min-height: @form-item-margin-bottom;
    opacity: 1;
  }
  // TODO ie上表单子项高度未撑开问题，后续在form里面增加classname进行处理
  // .@{ant-prefix}-row {
  //   display: block;
  // }
}

.@{form-prefix-cls}-horizontal {
  .@{form-item-prefix-cls} {
    // label不换行
    &-label {
      &::after {
        content: ':';
        display: inline-block;
        width: 8px;
        text-align: center;
        margin-right: 8px;
      }
  
      &>label {
        // 减去冒号占位符宽度
        max-width: calc(100% - 16px);
        & > span {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    &-no-colon {
      .@{form-item-prefix-cls}-label {

        & > label {
          max-width: 100%;
        }
        &::after {
          content: '';
        }
      }
    }
  }
}