@import './token.less';

.@{ns}-Form {
  font-size: @Form-fontSize;
  position: relative;
  &--inline {
    display: inline-flex;
    flex-wrap: wrap;
  }
  // 一般是快速编辑里的最后一个输入框
  &--quickEdit > div:last-of-type {
    margin-bottom: 0;
  }

  // &--inline {
  //   > .@{ns}-Button {
  //     margin-bottom: calc(@Form-item-gap / 2);
  //     margin-right: calc(@Form-item-gap / 2);
  //   }

  //   > .@{ns}-PlainField {
  //     display: inline-block;
  //     padding-top: @Form-input-paddingY;
  //     // padding-bottom: @Form-input-paddingY);
  //   }
  // }
  &-value {
    min-height: @Form-input-height;
    line-height: @Form-input-height;
  }

  &-item {
    margin-bottom: @Form-item-gap;
    padding-left: @gap-sm;
    &-margin-offset {
      margin-bottom: 0;
    }
    &:last-child {
      // margin-bottom: 0;
      .@{ns}-Form-feedback {
        position: relative;
      }
    }

    .@{ns}-Grid-form > &:last-child {
      margin-bottom: 0;
    }

    .@{ns}-Form--inline > &--inline {
      &:last-child {
        margin-right: 0;
        margin-bottom: 0;
      }
    }

    .@{ns}-Form-remark {
      padding-top: @Form-label-paddingTop;
      vertical-align: top;
    }

    &--inline {
      margin-right: @Form-mode-inline-item-gap;
    }

    // &--horizontal {
    //   > .@{ns}-Form-label {
    //     text-align: @Form--horizontal-label-align;
    //     white-space: @Form--horizontal-label-whiteSpace;

    //     &--left {
    //       text-align: left;
    //     }
    //   }
    // }

    // &--horizontal-justify {
    //   justify-content: space-between;

    //   > .@{ns}-Form-label {
    //     text-align: @Form--horizontal-justify-label-align;
    //     // white-space: @Form--horizontal-justify-label-whiteSpace;
    //   }
    //   > .@{ns}-Form-value {
    //     text-align: @Form--horizontal-justify-value-align;

    //     > * {
    //       text-align: initial;
    //     }
    //   }
    // }

    &--normal {
      > .@{ns}-Form-label {
        display: block;
        width: @Form-mode-default-width;
        .@{ns}-Form-star {
          // position: absolute;
          // left: -6px;
          // top: 3px;
        }
      }
    }

    .@{ns}-Form-control--withSize {
      > .@{ns}-ResultBox {
        // 兼容 @media (min-width: 576px) .cxd-Form-control--sizeLg
        display: flex;
      }
    }
  }
}

.@{ns}-Form-static {
  min-height: @Form-input-height;
  &:not(.is-noPaddingY-static) {
    padding-top: @Form-label-paddingTop;
    padding-bottom: @Form-label-paddingTop;
  }
  margin-bottom: 0;
  word-break: break-word;

  .@{ns}-Form-item--inline > .@{ns}-Form-value > & {
    display: inline-block;
    vertical-align: top;
  }

  &--borderFull {
    border: @Form-input-borderWidth solid @Form-input-borderColor;
    border-radius: @Form-input-borderRadius;
    padding: @Form-input-paddingY @Form-input-paddingX;
  }

  &--borderHalf {
    border-bottom: @Form-input-borderWidth solid @Form-input-borderColor;
    border-radius: @Form-input-borderRadius;
    padding: @Form-input-paddingY @Form-input-paddingX;
  }
}

.@{ns}-Form-label {
  font-weight: @Form-item-fontWeight;
  margin-bottom: @Form-mode-default-labelGap;
  position: relative;
  font-size: @Form-item-fontSize;
  color: @Form-item-fontColor;
  overflow: hidden;
  display: flex;
  align-items: center;
  .label-text {
    line-height: @Form-item-lineHeight;
    position: relative;
    text-wrap: nowrap;
  }
  &-icon {
    margin-left: @gap-xs;
    color: var(--text-color-secondary);
    cursor: help;
  }
  &.required {
    .label-text {
      &::before {
        content: '*';
        color: @Form-item-star-color;
        line-height: 1;
        font-size: @Form-item-star-size;
        margin-right: @gap-xs;
      }
    }
  }
}

// .@{ns}-Form-star {
//   color: @Form-item-star-color;
// font-size: @Form-item-star-size;
//   line-height: 1;
// }
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(-20%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.@{ns}-Form-feedback {
  color: @Form-feedBack-color;
  list-style-type: none;
  margin: 0;
  // margin-top: @Form-feedBack-gap;
  padding: 0;
  font-size: @Form-feedBack-fontSize;
  min-height: @Form-item-gap;
  animation: fade-in @animation-duration ease-in-out forwards;
  li {
    line-height: @Form-item-gap;
  }
}

.@{ns}-Form-description {
  display: block;
  word-break: break-word;
  color: @Form-description-color;
  font-weight: @Form-description-fontWeight;
  line-height: @Form-description-lineHeight;
  margin-top: @Form-description-gap;
  font-size: @Form-description-fontSize;
}

.@{ns}-Form-hint {
  display: inline-block;
  margin-left: @gap-sm;
  padding-top: @Form-input-paddingY;
  vertical-align: top;
}

.@{ns}-Form-placeholder {
  color: @Form-input-placeholderColor;
}

.@{ns}-Form-caption {
  display: inline-block;
  line-height: @Form-input-height;
  height: @Form-input-height;
  margin-left: 10px;
}

@media (min-width: @screen-sm-min) {
  // @include media-breakpoint-up(sm) {
  .@{ns}-Form-label {
    display: inline-block;
    max-width: 100%;
  }

  .@{ns}-Form-control--sizeXs {
    // min-width: @Form-control-widthXs);
    // width: auto;
    width: @Form-control-widthXs;
    max-width: 100%;
    display: inline-block;
    vertical-align: top;

    // 非常难受，number 类型的 input 不能设置size
    &.@{ns}-NumberControl {
      width: @Form-control-widthXs;
    }
  }

  .@{ns}-Form-control--sizeSm {
    width: @Form-control-widthSm;
    max-width: 100%;
    display: inline-block;
    vertical-align: top;

    // 非常难受，number 类型的 input 不能设置size
    &.@{ns}-NumberControl {
      width: @Form-control-widthSm;
    }
  }

  .@{ns}-Form-control--sizeMd {
    width: @Form-control-widthMd;
    max-width: 100%;
    display: inline-block;
    vertical-align: top;
  }

  .@{ns}-Form-control--sizeLg {
    width: @Form-control-widthLg;
    max-width: 100%;
    display: inline-block;
    vertical-align: top;

    // 非常难受，number 类型的 input 不能设置size
    &.@{ns}-NumberControl {
      width: @Form-control-widthLg;
    }
  }

  .@{ns}-Form-item {
    &--horizontal {
      display: flex;
      flex-wrap: nowrap;

      > .@{ns}-Form-value {
        flex-basis: 0;
        flex-grow: 1;
        max-width: @Form--horizontal-value-maxWidth;
        min-width: @Form--horizontal-value-minWidth;
      }

      .@{ns}-Form-itemColumn--xs,
      .@{ns}-Form-itemColumn--sm,
      .@{ns}-Form-itemColumn--normal,
      .@{ns}-Form-itemColumn--auto,
      .@{ns}-Form-itemColumn--md,
      .@{ns}-Form-itemColumn--lg {
        flex-grow: unset;
        flex-basis: unset;
      }

      > .@{ns}-Form-label {
        margin: 0;
        flex-shrink: 0;
        margin-right: @Form--horizontal-label-gap;

        .label-text {
          height: 28px;
          line-height: 28px;
        }
      }

      .@{ns}-Form-itemColumn--xs {
        width: @Form--horizontal-label-widthXs;
      }

      .@{ns}-Form-itemColumn--sm {
        width: @Form--horizontal-label-widthSm;
      }

      .@{ns}-Form-itemColumn--normal {
        width: @Form--horizontal-label-widthBase;
      }

      .@{ns}-Form-itemColumn--md {
        width: @Form--horizontal-label-widthMd;
      }

      .@{ns}-Form-itemColumn--lg {
        width: @Form--horizontal-label-widthLg;
      }

      .@{ns}-Form-itemColumn--auto {
        width: auto;
      }

      // @for $i from (1) through $Form--horizontal-columns {
      //   .@{ns}-Form-itemColumn--#{$i} {
      //     flex: 0 0 percentage(math.div($i, $Form--horizontal-columns));
      //     max-width: percentage(math.div($i, $Form--horizontal-columns));
      //     min-height: 1px;
      //   }
      // }
      .@{ns}-Form-itemColumn--align-left {
        text-align: left;
      }
      .@{ns}-Form-itemColumn--align-right {
        text-align: right;
      }
    }

    &--inline {
      display: inline-block;
      vertical-align: top;

      > .@{ns}-Form-label {
        height: 32px;
        line-height: 32px;
        margin: 0;
        margin-right: @Form-mode-inline-label-gap;

        .@{ns}-Form-star {
          // position: absolute;
          // left: -6px;
          // top: 3px;
        }
      }

      > .@{ns}-Form-value {
        display: inline-block;
        vertical-align: top;

        > .@{ns}-Button--link {
          padding-top: @Form-label-paddingTop;
        }

        > .@{ns}-Form-control {
          vertical-align: top;
          display: inline-block;
        }

        > .@{ns}-Form-control.@{ns}-InputGroup {
          display: inline-flex;
        }

        > .@{ns}-TextControl--withAddOn {
          display: inline-flex;
        }
      }
    }
  }

  .@{ns}-Form-row {
    display: flex;
    flex-wrap: wrap;

    margin-left: calc(@Form-row-gutterWidth) / -2;
    margin-right: calc(@Form-row-gutterWidth) / -2;
    align-items: flex-start;

    > * {
      padding-left: calc(@Form-row-gutterWidth) / 2;
      padding-right: calc(@Form-row-gutterWidth) / 2;
    }
  }

  .@{ns}-Form-col {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
  }

  .@{ns}-Form-rowInner {
    display: flex;
    flex-wrap: nowrap;

    > .@{ns}-Form-label {
      display: inline-block;
      vertical-align: top;
      padding-top: @Form-label-paddingTop;
      padding-right: @Form-row-gutterWidth;
    }

    > .@{ns}-Form-control {
      flex-basis: 0;
      flex-grow: 1;

      // &:not(.@{ns}-Form-control--withSize) {
      //   width: @Form-control-widthBase);
      // }
    }
  }
}

.@{ns}-Form--debug {
  padding: @gap-sm;
  margin-bottom: @gap-sm;
  background-color: rgb(250, 250, 250);
  border-radius: var(--border-radius);
  position: relative;
}

// .@{ns}-Form--quickEdit {
//   min-width: @Form-control-widthSm);
// }

.@{ns}-Form--column {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(@Form-group-gutterWidth) / -2;
  margin-right: calc(@Form-group-gutterWidth) / -2;
  > .@{ns}-Form-item {
    flex-shrink: 0;
    flex-grow: 1;
    padding-left: calc(@Form-group-gutterWidth) / 2;
    padding-right: calc(@Form-group-gutterWidth) / 2;
  }
}

.@{ns}-Form--column-2 > .@{ns}-Form-item {
  width: 50%;
}

.@{ns}-Form--column-3 > .@{ns}-Form-item {
  width: 33%;
}

.@{ns}-Form--column-4 > .@{ns}-Form-item {
  width: 25%;
}

.@{ns}-Form--column-5 > .@{ns}-Form-item {
  width: 20%;
}

.@{ns}-Form--column-6 > .@{ns}-Form-item {
  width: 16.6%;
}

.@{ns}-Form--column-7 > .@{ns}-Form-item {
  width: 14.2%;
}

.@{ns}-Form--column-8 > .@{ns}-Form-item {
  width: 12.5%;
}

.@{ns}-Form-column-9 > .@{ns}-Form-item {
  width: 11.1%;
}

.@{ns}-Form-column-10 > .@{ns}-Form-item {
  width: 10%;
}