@import '~@ucap/lg-scss/mixins';

.user-list {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  padding: 0 16px;
  height: 70px;
  align-items: center;
  &.line-top {
    border-top: 1px solid $gray-rec;
  }
  .user-profile-info {
    display: inline-flex;
    flex-direction: row;
    flex-grow: 2.3;
    .user-profile-thumb {
      @include profile-avatar-default(
        0 5px 5px 0,
        8,
        $green,
        18px
      ); //오른 아래 공간, 모바일 온라인 아이콘 크기, 모바일 아이콘 색, 모바일 아이콘 bg크기
      .presence {
        //PC 상태
        @include presence-state(8px); //원크기
      }
      .profile-image {
        @include avatar-img(36px, 2px); //아바타 크기, 왼쪽공간
      }
    }
    .user-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      padding-left: 16px;
      .user-n-g {
        display: flex;
        flex-flow: row-reverse nowrap;
        align-items: flex-end;
        height: 22px;
        .user-name {
          @include ellipsis-column(1);
          height: 22px;
          font: {
            size: 16px;
            weight: 600;
          }
          color: $gray-re21;
          order: 1;
          -ms-flex-order: 1;
        }
        .user-grade {
          @include ellipsis(1);
          align-self: stretch;
          font: {
            size: 13px;
          }
          color: $gray-re70;
          margin-left: 4px;
          order: 0;
          -ms-flex-order: 0;
        }
      }
      .dept-name {
        @include ellipsis(1);
        font-size: 12px;
        color: $gray-re6;
        line-height: 16px;
      }
    }
  }
  .intro {
    display: inline-flex;
    flex-flow: row nowrap;
    flex-basis: 35%;
    flex-grow: 0;
    align-items: baseline;
    p {
      font-size: 11px;
      line-height: 1.4;
      @include ellipsis(2);
      height: 30px;
    }
    &:before {
      content: 'chat';
      @include font-family-ico($font-ico-default, 12, center, $lipstick);
      flex-direction: row;
      align-items: flex-start;
      width: 12px;
      height: 12px;
      line-height: 12px;
      margin-right: 4.8px;
      position: relative;
      top: 2px;
    }
  }
  .btn-partner-set {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    height: 20px;
    margin-top: 20px;
    img {
      vertical-align: top;
    }
  }
  .intro-name {
    display: inline-flex;
    flex-flow: row nowrap;
    flex-basis: 35%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    span {
      display: inline-block;
      text-align: center;
      width: 100%;
      height: 20px;
      line-height: 20px;
      color: $gray-re70;
      font-size: 11px;
      padding: 0 10px;
      border-radius: 30px;
      border: solid 1px $warm-pink;
      background-color: #ffffff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}