@import '../../style/mixin';

.Yep-list {
  &-header {
    padding: $v-spacing-lg $h-spacing-lg $v-spacing-md $h-spacing-lg;
    font-size: $font-size-base;
    color: $color-text-caption;
    width: 100%;
    box-sizing: border-box;
  }
  &-footer {
    padding: $v-spacing-md $h-spacing-lg $v-spacing-lg $h-spacing-lg;
    font-size: $font-size-base;
    color: $color-text-caption;
  }
  &-body {
    position: relative;
    background-color: $fill-base;
    @include border-top-1px();
    @include border-bottom-1px();

    div:not(:last-child) {
      .Yep-list-line {
        @include border-bottom-1px()
      }
    }
  }
}

.Yep-list-item.Yep-list-item-disabled {
  .Yep-list-line {
    .Yep-list-content,
    .Yep-list-extra {
      color: #bbb;
    }
  }
}

.Yep-list-item {
  position: relative;
  display: flex;
  padding-left: $h-spacing-lg;
  min-height: $list-item-height;
  background-color: $fill-base;
  vertical-align: middle;
  overflow: hidden;
  transition: background-color 200ms;
  align-items: center;

  &.Yep-list-item-top {
    .Yep-list-line {
      align-items: flex-start;

      .Yep-list-arrow {
        margin-top: 4px;
      }
    }
  }

  &.Yep-list-item-middle {
    .Yep-list-line {
      align-items: center;
    }
  }

  &.Yep-list-item-bottom {
    .Yep-list-line {
      align-items: flex-end;
    }
  }

  &.Yep-list-item-error {
    .Yep-list-line {
      .Yep-list-extra {
        color: #f50;

        .Yep-list-brief {
          color: #f50;
        }
      }
    }
  }

  &.Yep-list-item-active {
    background-color: $fill-tap;
  }



  img {
    width: $icon-size-md;
    height: $icon-size-md;
    vertical-align: middle;
  }

  /* list左图片显示*/
  .Yep-list-thumb {
    &:first-child {
      margin-right: $h-spacing-lg;
    }

    &:last-child {
      margin-left: $h-spacing-md;
    }
  }

  .Yep-list-line {
    position: relative;
    display: flex;
    flex: 1;
    align-self: stretch;
    padding-right: $h-spacing-lg;
    overflow: hidden;

    /* list左侧主内容*/
    .Yep-list-content {
      flex: 1;
      color: $color-text-base;
      font-size: $font-size-caption;
      line-height: 1.5;
      text-align: left;
      @include sl();

      padding-top: 14px;
      padding-bottom: 14px;
    }

    /* list右补充内容*/
    .Yep-list-extra {
      flex-basis: 36%;
      color: $color-text-caption;
      font-size: 32px;
      line-height: 1.5;
      text-align: right;
      @include sl();

      padding-top: 14px;
      padding-bottom: 14px;
    }

    .Yep-list-title {
      @include sl();
    }

    /* 辅助性文字*/
    .Yep-list-brief {
      color: $color-text-secondary;
      font-size: $font-size-help;
      line-height: 1.5;
      margin-top: $v-spacing-sm;
      @include sl();
    }

    /* list右侧箭头*/
    .Yep-list-arrow {
      display: block;
      width: $icon-size-xxs;
      height: $icon-size-xxs;
      margin-left: $h-spacing-md;
      visibility: hidden;

      &-horizontal {
        visibility: visible;
      }

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

      &-vertical-up {
        visibility: visible;
        transform: rotate(270deg);
      }
      .Yep-icon{
        color: #C7C7CC;
      }
    }

    &-multiple {
      padding: 25px $h-spacing-lg 25px 0;

      .Yep-list-content {
        padding-top: 0;
        padding-bottom: 0;
      }

      .Yep-list-extra {
        padding-top: 0;
        padding-bottom: 0;
      }
    }

    &-wrap {
      .Yep-list-content {
        white-space: normal;
      }

      .Yep-list-extra {
        white-space: normal;
      }
    }
  }

  select {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    font-size: 34px;
    appearance: none;
    background-color: transparent;
  }
}