@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '~@cainiaofe/cn-ui-theme-light/token.scss';
@import '../../../styles/mixins.scss';

.#{$hashClassName}.cn-ui-m-form-item {
  .cn-ui-m-form-item {
    &-header {
      display: flex;
      align-items: center;
      column-gap: $m-s-12;
      border-bottom: $m-line solid $m-color-bg-disabled;
      padding-bottom: $m-s-10;

      &.has-error {
        border-bottom-color: $m-color-error;
      }

      &--hd {
        flex: 1;
        overflow: hidden;
      }

      &--right-extra {
        max-width: 40%;
      }
    }

    &-label {
      font-size: $m-font-size-body-2;
      line-height: $m-font-lineheight-2;
      margin-bottom: $m-s-2;
      color: $m-color-text-title3;
      @include flex(row, flex-start, center);

      &-tip {
        color: $color-bg-heavy;
        height: $m-s-20;
      }

      &-content {
        @include flex(row, flex-start, center);
        overflow: hidden;
        flex-shrink: 0;
        max-width: 100%;

        .cn-ui-m-icon {
          //label单行或者多行时居上
          align-self: flex-start;
          margin-top: $m-s-4;
          margin-left: $m-s-4;
        }
      }

      &--left {
        font-size: $m-font-size-body-1;
        @include flex(column, flex-start, flex-start);
        margin-right: $m-s-12;
        margin-bottom: 0;

        .cn-ui-m-form-item-label-content {
          width: 100%;
        }

        .cn-ui-m-form-item-label-extra {
          margin-left: 0;
          margin-top: $m-s-4;
        }
      }

      &--text-right {
        align-items: flex-end;

        .cn-ui-m-form-item-label-content,
        .cn-ui-m-form-item-label-extra {
          justify-content: flex-end;
          text-align: end;
        }
      }
    }

    //无标题时不展示label
    &-no-label {
      .cn-ui-m-form-item-label {
        margin-top: $m-s-6;

        .cn-ui-m-form-item-label-content {
          display: none;
        }
      }
    }

    &-control {
      word-break: break-all;
      max-width: 100%;

      &--right {
        display: flex;
        justify-content: flex-end;
        text-align: end;
        & > :not(.cn-ui-m-switch, .cn-ui-m-radio-group) {
          flex: 1;
        }
      }
    }

    &-required {
      font-size: $m-font-size-body-1;
      margin-left: $m-s-4;
      color: $m-color-error;
      align-self: flex-start;
    }

    &-icon {
      color: $m-color-bg-darker1;

      &--disabled {
        color: $m-color-text-disabled;
      }

      &--error {
        color: $m-color-error;
      }
    }

    &-error {
      font-size: $m-font-size-caption;
      line-height: $m-s-16;
      padding: $m-s-3 0;
      background: $m-color-error-lightest;
      color: $m-color-error;
    }

    &__extra {
      padding: $m-s-3;
      background-color: #f5f9fc;
      color: $m-color-text-tip;
      line-height: $m-s-16;
      font-size: $m-font-size-caption;
      word-break: break-word;
    }
  }

  &:not(.cn-ui-m-form-item--left):not(.cn-ui-m-form-item-no-label):not(
      :first-child
    )
    .cn-ui-m-form-item-label {
    margin-top: $m-s-12;
  }

  &:not(.cn-ui-m-form-item--left) {
    .cn-ui-m-form-item-label-content {
      .cn-ui-m-icon {
        margin-top: 0;
      }
    }
  }

  &--left {
    .cn-ui-m-form-item-header--hd {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: stretch;
      padding-top: $m-s-12;
    }

    .cn-ui-m-form-item-control {
      flex: 1;
      padding-bottom: 0;
    }

    &:first-child {
      .cn-ui-m-form-item-header--hd {
        padding-top: 0;
      }
    }

    &:last-child {
      .cn-ui-m-form-item-header--hd {
        padding-bottom: 0;
      }
    }
  }

  &-disabled {
    color: $m-color-text-disabled;
  }

  &:last-child {
    .cn-ui-m-form-item-header:not(.has-error) {
      border-bottom-color: transparent;
      padding-bottom: 0;
    }

    .cn-ui-m-form-item-control {
      padding-bottom: 0;
    }
  }

  .cn-ui-m-form-item-no-label.cn-ui-m-form-item--left {
    .cn-ui-m-form-item-label {
      display: none;
    }
  }
}

//无标题时不展示label
.#{$hashClassName}.cn-ui-m-card {
  .cn-ui-m-form-item-no-label:first-child {
    .cn-ui-m-form-item-label {
      margin: 0px;
    }
  }
}