$font-color: #7A7A7A;
.conversation-list-container {
  overflow-x: hidden;
  height: 100%;
}

.conversation-preview-container {
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  border: none;
  width: 100%;
  height: 64px;
  cursor: pointer;
  line-height: 17px;
  padding: 0 20px;

  .content {
    flex: 1;
    text-align: left;
    max-width: 58%;
    min-width: 58%;
    margin-left: 10px;

    .title {
      font-style: normal;
      font-weight: 700;
      font-size: 14px;
      line-height: 17px;
      font-family: PingFangSC-Medium;
      padding: 1px 0;
    }

    .message {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: $font-color;
      font-family: PingFangSC-Medium;
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
      padding: 1px 0;
    }
  }

  .external {
    min-width: 90px;
    text-align: right;
    flex: 1;
    display: flex;
    flex-direction: column;

    .unread {
      height: 19px;
      padding: 1px 0;
    }

    .time {
      color: $font-color;
      font-family: PingFangSC-Medium;
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 14px;
      padding: 1px 0;
    }

    .more--hover {
      display: flex;
      justify-content: right;

      .icon-more {
        transform: scale(1.5);
        &:hover {
        }
      }

      .more-handle-box {
        top: 0;
        right: 0;
        box-shadow: 0 0 10px rgba(0, 0, 0, .1);
        bottom: initial;
        padding: 14px 0;
        box-sizing: border-box;
        text-align: start;
        white-space: nowrap;

        .more-handle-item {
          font-size: 16px;
          font-family: PingFangSC-Medium;
          line-height: 19px;
          padding: 6px 16px;
          cursor: pointer;
          font-weight: 500;
          box-sizing: border-box;

          &:hover {
            background: #147AFF;
            opacity: 0.6;
            color: #FFFFFF !important;
          }
        }
      }
    }
  }

  &:hover {
    background-color: rgba(0, 110, 255, 0.1);
  }

  &.conversation-preview-content--pin {
    background-color: #F2F2F2D4;
  }

  &.conversation-preview-content--active {
    background-color: rgba(0, 110, 255, 0.1);

    .title {
      color: rgb(20, 122, 255);
    }
  }

  &.conversation-preview-content--unread {
    .unread {
      width: 16px;
      height: 13px;
      background: #FF3742;
      border-radius: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 2px 5px 1px;
      color: #FFFFFF;
      font-size: 11px;
      font-weight: 700;
      margin: 2px 0 2px auto;
    }
  }
}