//列表布局
.#{$namespace} {
  &-list {
    // 列表标题
    .list-title {
      padding-bottom: 20px;
      position: relative;
      & > h1 {
        font-size: $ft-bg;
        line-height: 1;
        color: $g-333;
        font-weight: bold;
        display: inline-block;
        position: relative;
      }

      .more {
        font-size: $ft-bs;
        line-height: 1;
        color: $g-999;
        position: absolute;
        right: 0;
        top: 2px;
        @include transition();

        &:hover {
          color: $primary;
        }
      }

      // 标题有下标
      &.show {
        h1 {
          &::after {
            content: "";
            display: block;
            width: 42px;
            height: 3px;
            position: absolute;
            bottom: -13px;
            left: 50%;
            transform: translateX(-50%);
            background: $primary;
          }
        }
      }
    }
    // 文字列表（竖排）
    .list-group {
      display: flex;
      display: -ms-flexbox;
      flex-direction: column;
      // 项
      .item {
        position: relative;
        padding-top: $list-item-pt;
        padding-bottom: $list-item-pb;

        a {
          display: block;
          color: $link-color;
          font-size: $list-item-link-ft-size;
          line-height: 1;
          @include txtover();
          width: $list-item-link-width;
          @include transition();

          &:hover,
          &:active,
          &:focus {
            color: $list-item-link-color-hover;
          }
        }
        // 时间
        time,
        .time {
          font-size: $list-item-time-ft;
          color: $list-item-time-color;
          position: absolute;
          top: calc(50% - 9px);
          right: 0;
        }
      }
      // 点
      &.dot {
        .item {
          a {
            padding-left: 20px;

            &::before {
              content: "";
              display: block;
              width: $list-item-dot-width;
              height: $list-item-dot-height;
              background-color: $list-item-dot-bg;
              border-radius: $border-radius-circle;
              position: absolute;
              left: 0;
              top: calc(50% - 2px);
              z-index: 1;
              @include transition();
            }

            &:hover::before {
              background-color: $list-item-dot-hover;
              border-radius: $border-radius-circle;
            }
          }
        }
      }
    }

    &-item {
      display: flex;
      font-size: 16px;
      position: relative;
      justify-content: space-between;
      align-items: center;
      background-color: $white;
      flex-direction: row;
      cursor: pointer;

      &:hover {
        .hui-list-item__content-title {
          color: $primary;
        }
      }

      &__container {
        flex: 1;
        display: flex;
        flex-direction: row;
        padding: 12px;
        position: relative;
        overflow: hidden;
      }

      &__content {
        display: flex;
        padding-right: 8px;
        flex: 1;
        color: $g-333;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        padding-left: 15px;
        &-title {
          font-size: 16px;
          color: #606266;
          overflow: hidden;
        }
        &-note {
          margin-top: 5px;
          color: $g-333;
          font-size: $ft-sm;
          overflow: hidden;
        }
      }
      &__extra-text {
        color: $primary;
        font-size: 20px;
      }
    }
    .badgeText {
      color: $g-666;
      font-size: $ft-sm;
      margin-left: 5px;
    }

    // 横排列表
    &.flex-row {
      .hui-list-item {
        .hui-list-item__content {
          flex-direction: row;
          justify-content: flex-start;
          padding-left: 0;
          padding-right: 0;
          line-height: 1;
          &-title {
            min-width: 120px;
            text-align: right;
            padding-right: 12px;
            font-size: 14px;
            font-weight: bold;
          }
          &-note {
            margin-top: 0;
          }
          .image-preview {
            margin-right: 10px;
          }
        }
      }
    }
  }
}