@charset 'utf-8';

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  white-space: nowrap;
  word-wrap: normal;
}
.ellipsis2 {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}

$listH-row2: 64px;
$line-basic: 1px solid #dddddd;
%list-item {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 14px;
  width: 100%;
  height: $listH-row2;
  border-bottom: $line-basic;
  padding: 0 20px;
}
.mat-card-header .mat-card-title {
  margin: 0 -16px;
  padding-bottom: 10px;
}
.search-result {
  .result-num {
    padding: 10px;
    display: flex;
    height: 40px;
  }
}

.list-item {
  @extend %list-item;
  .thumbnail {
    &-mask {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 16px;
      position: relative;
      img {
        width: 40px;
        height: auto;
        background-color: #efefef;
      }
    }
  }
  span[class*='badge'] {
    position: absolute;
    background-color: #ffffff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    bottom: 0px;
    left: 30px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    .mat-icon {
      font-size: 1em;
      width: 18px;
      height: 18px;
      line-height: 18px;
      min-width: 18px;
      min-height: 18px;
    }
  }
}
