@import "mixins/mixins";
@import "mixins/utils";
@import "common/var";

@include b(list) {
  
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  color: $--color-text-regular;
  font-size: $--font-size-base;
  
  @include e(empty-text) {
    text-align: center;
    color: $--color-text-secondary;
  }
  
  @include when(split) {
    @include b(list-item) {
      border-bottom: 1px solid #e8e8e8;
      
      &:last-child {
        border-bottom: none;
      }
    }
  }
  
  .el-list__header,
  .el-list__footer {
    padding-top: $--list-large-padding-top;
    padding-bottom: $--list-large-padding-bottom;
  }
  
  @include when(bordered) {
    border-radius: $--border-radius-base;
    border: 1px solid $--border-color-light;
    
    .el-list__header,
    .el-list-item,
    .el-list__footer {
      border-bottom: 1px solid $--border-color-light;
    }
  }
  
  .el-list__header,
  .el-list-item,
  .el-list__footer {
    padding-left: $--list-large-padding-left;
    padding-right: $--list-large-padding-right;
  }
  
  &.el-list--medium {
    .el-list-item,
    .el-list__header,
    .el-list__footer {
      padding: $--list-medium-padding-top $--list-medium-padding-right $--list-medium-padding-bottom $--list-medium-padding-left;
    }
  }
  
  &.el-list--small {
    .el-list-item,
    .el-list__header,
    .el-list__footer {
      padding: $--list-small-padding-top $--list-small-padding-right $--list-small-padding-bottom $--list-small-padding-left;
    }
  }
  
  @include b(list-item) {
    align-items: center;
    display: flex;
    padding-top: $--list-large-padding-top;
    padding-bottom: $--list-large-padding-bottom;
    
    @include b(list-item-meta) {
      align-items: flex-start;
      display: flex;
      flex: 1;
      font-size: 0;
      
      @include b(list-item-meta-avatar) {
        margin-right: 16px;
      }
      
      @include b(list-item-meta-content) {
        -webkit-box-flex: 1;
        -webkit-flex: 1 0;
        -ms-flex: 1 0;
        flex: 1 0;
        
        @include b(list-item-meta-title) {
          color: rgba(0,0,0,.65);
          margin-bottom: 4px;
          font-size: 14px;
          line-height: 22px;
        }
        
        @include b(list-item-meta-description) {
          color: rgba(0,0,0,.45);
          font-size: 14px;
          line-height: 22px;
        }
      }
    }
    
    @include b(list-item-content) {
      display: flex;
      flex: 1;
      justify-content: flex-end;
    }
    
    @include b(list-item-content-single) {
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
    }
    
    @include b(list-item-action) {
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      margin-left: 48px;
      padding: 0;
      list-style: none;
    }
  }
  
  @include when(vertical) {
    @include b(list-item) {
      display: block;
      
      @include b(list-item-extra-wrap) {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        
        @include b(list-item-main) {
          display: block;
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          -ms-flex: 1;
          flex: 1;
          
          @include b(list-item-meta) {
            margin-bottom: $--list-vertical-item-meta-margin-bottom;
            
            @include b(list-item-meta-avatar) {
              display: none;
            }
            
            @include b(list-item-meta-title) {
              color: rgba(0,0,0,.85);
              margin-bottom: $--list-vertical-item-meta-title-margin-bottom;
              font-size: 16px;
              line-height: 24px;
            }
          }
          
          @include b(list-item-content) {
            display: block;
            color: rgba(0,0,0,.65);
            font-size: 14px;
            margin-bottom: $--list-vertical-item-content-margin-bottom;
          }
          
          @include b(list-item-action) {
            margin-left: auto;
          }
        }
        
        @include b(list-item-extra) {
          margin-left: $--list-vertical-item-extra-margin-left;
        }
      }
    }
  }
  
  @include b(list-load-more) {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: $--list-large-padding-top;
    padding-bottom: $--list-large-padding-bottom;
    text-align: center;
  }
  
  @include b(list-loading) {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: flex;
    margin-top: 12px;
    
    .el-list-loading__container {
      width: 100px;
      height: 50px;
      flex: 1;
    }
  }
  
  @include when('grid') {
    .el-list-item {
      border-bottom: none;
      padding-top: 0;
      padding-bottom: 0;
      margin-bottom: 16px;
      
      .el-list-item-content {
        display: block;
        max-width: 100%;
      }
    }
  }
}