.#{$list-prefix-cls} {

  &__header {
    width: 100%;
    padding: $list-item-padding-x $list-item-padding-x $list-body-padding-y;
    font-size: $list-body-font-size;
    color: $gray-10;

    &:empty {
      display: none;
    }
  }

  &__body {
    position: relative;
    background-color: $white;
    border-top: $border-width-sm solid $gray-12;
    border-bottom: $border-width-sm solid $gray-12;
  }
}

.#{$list-prefix-cls}__item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: $list-item-height;
  padding-left: $list-item-padding-x;
  overflow: hidden;
  vertical-align: middle;
  background-color: $white;
  transition: background-color $transition-time;
  // 下边框
  &:not(:last-child) {
    &::after {
      position: absolute;
      z-index: 3;
      right: auto;
      bottom: 0;
      left: $list-item-padding-x;
      width: 100%;
      content: "";
      border-bottom: $border-width-sm solid $gray-12;
    }
  }

  .#{$list-prefix-cls}__line {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    align-self: stretch;
    min-height: $list-item-height;
    padding-top: $list-item-padding-y;
    padding-right: $list-item-padding-x;
    padding-bottom: $list-item-padding-y;
    overflow: hidden;

    // list左侧主内容
    .#{$list-prefix-cls}__content {
      flex: 1;
      line-height: $list-arrow-font-size;
      color: $gray-9;
      text-align: left;

      &:not(:last-child) {
        margin-right: $list-content-margin-right;
      }
    }

    // list右补充内容
    .#{$list-prefix-cls}__extra {
      line-height: $list-arrow-font-size;
      color: $gray-11;
      text-align: right;
    }

    // 辅助性文字
    .#{$list-prefix-cls}__brief {
      margin-top: $list-brief-margin-top;
      font-weight: 400;
      line-height: $line-height-paragraph;
      color: $gray-11;
    }
  }

  // list右侧箭头
  .#{$list-prefix-cls}__arrow {
    width: .3rem;

    i{
      display: block;
      font-size: $list-arrow-font-size;
      color: $gray-11;
    }

    &--vertical {
      i{
        transform: rotate(90deg);
      }
    }

    &--vertical-up {
      i{
        transform: rotate(270deg);
      }
    }
  }

  // list左图标显示
  .#{$list-prefix-cls}__thumb {
    margin-right: $list-thumb-margin-right;
    text-align: center;
    background-color: $brand-primary;
    border-radius: $border-radius;

    span{
      display: inline-block;
      width: $list-thumb-size;
      height: $list-thumb-size;
      font-size: $list-thumb-icon-font-size;
      font-weight: 600;
      line-height: $list-thumb-size;
      color: #fff;
      vertical-align: middle;
    }

    // 圆形
    &--circle{
      border-radius: 50%;
    }

    // 显示在右边
    &--right {
      margin-right: 0;
    }
  }

  &--top,
  &--top .#{$list-prefix-cls}__line{
    align-items: flex-start;
  }

  &--bottom,
  &--bottom .#{$list-prefix-cls}__line{
    align-items: flex-end;
  }

  &--error {
    .#{$list-prefix-cls}__line {
      .#{$list-prefix-cls}__extra {
        color: $brand-danger;

        .#{$list-prefix-cls}__brief {
          color: $brand-danger;
        }
      }
    }
  }

  &--active {
    background-color: $gray-4;
  }

  &--mask {
    .#{$list-prefix-cls}__content {
      position: relative;
      width: 90%;
      overflow: hidden;

      &::after{
        @extend %text-mask;
        right: 0;
        width: 50%;
        background: linear-gradient(90deg,hsla(0,0%,100%,0) 30%,#fff);
      }
    }
    .#{$list-prefix-cls}__content,
    .#{$list-prefix-cls}__brief {
      white-space: nowrap;
    }
  }

  @include status-disabled;

}


//
// form-item
//

.form-item {
  &.#{$list-prefix-cls}__item {
    padding-right: $list-item-padding-x;
  }

  &__label,
  &__content{
    // 覆盖row col 的 padding值
    padding: 0;
  }

  &__label{
    line-height: $list-item-height;
    color: $gray-9;
    @extend %text-truncate;
  }

  &__content {

    &:not(:last-child) {
      margin-right: $list-content-margin-right;
    }
  }

  // label 在输入框上方
  &--top {
    margin-bottom: $input-label-top-margin-bottom;
    .form-item__label {
      display: block;
      margin-bottom: $input-label-margin-bottom;
      font-size: $input-label-font-size;
      line-height: 1;
    }
  }


  // 必填项
  &--required {
    .form-item__label {
      &::after {
        display: inline-block;
        font-size: .28rem;
        line-height: 1;
        color: $brand-danger;
        content: "*";
      }
    }
  }

  // 校验
  // &.has-danger,
  // &.has-success {
  //   .form-item__status-icon::after {
  //     @extend %aid-icon;
  //     font-size: .48rem;
  //   }
  // }
  // &.has-danger {
  //   .form-item__status-icon::after {
  //     color: $brand-danger;
  //     content: "\F2B0";
  //   }
  // }
  // &.has-success {
  //   .form-item__status-icon::after {
  //     color: $brand-success;
  //     content: "\F27A";
  //   }
  // }
}
