@charset 'utf-8';
$listH-row2: 60px;
$line-basic: 1px solid #dddddd;

@mixin ellipsis($row) {
  overflow: hidden;
  text-overflow: ellipsis;
  @if $row == 1 {
    white-space: nowrap;
    word-wrap: normal;
  } @else if $row >= 2 {
    display: -webkit-box;
    -webkit-line-clamp: $row;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
  }
}

%list-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: $listH-row2;
  border-bottom: $line-basic;
  padding: 0 20px;
}

//expansion-panel 높이
.group-tree {
  .tree-node-frame {
    height: $listH-row2;
    .group-name {
      font-size: 0.96em;
    }
  }
}
.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: 12px;
      position: relative;
      img {
        width: 40px;
        height: auto;
        background-color: #efefef;
      }
    }
  }
  &.checkbox {
    .mat-checkbox {
      margin-left: auto;
    }
  }
  span[class*='marker'] {
    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;
    }
  }
  .noti-sum.mat-badge {
    position: absolute;
    right: 30px;
    bottom: 20px;
    font-size: 0.9em;
  }
}

//list-item 폰트 사이즈
.list-item {
  font-size: 1em;
  .name {
    font-weight: 600;
    @include ellipsis(1);
  }
  .grade {
    font-size: 0.8em;
    margin-left: 4px;
    color: #777777;
  }
  .work-status,
  .member {
    font-size: 0.8em;
  }
  .final-message,
  .dept {
    font-size: 0.86em;
    color: #777777;
    @include ellipsis(1);
  }
  .date {
    font-size: 0.8em;
    @include ellipsis(1);
  }
}
