.module-conversations {
  &-count {
    width: 100%;
    height: 30px;
    margin: 0;
    padding: 0 16px;
    @include flex($align: center);
    font-size: 12px;
    border-top: 1px solid;
    border-bottom: 1px solid;

    @include light-theme() {
      color: #9199a3;
      background-color: $color-sider-bkg;
      border-color: #f8f8fa;
    }

    @include dark-theme() {
      color: $color-gray-15;
      background-color: $color-gray-65;
      border-color: $color-gray-60;
    }

    & > span {
      margin-left: 8px;

      @include light-theme() {
        color: #bdc2c8;
      }

      @include dark-theme() {
        color: $color-gray-15;
      }
    }
  }

  &-container {
    flex: 1;
    width: 100%;
    max-height: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  &-wrapper {
    @include flex($align: center);
    height: 64px;
    padding: 0 12px;
    font-size: 12px;
    cursor: pointer;
    overflow: hidden;
    // border-bottom: 1px solid;

    @include light-theme() {
      // border-color: $color-roomitem-border;
      background-color: $color-white;

      &:hover {
        background: linear-gradient(to right, $color-gray-05, $color-white);
      }
    }

    @include dark-theme() {
      // border-color: $color-gray-60;
      background-color: $color-gray-80;

      &:hover {
        background: linear-gradient(to right, $color-gray-65, $color-gray-80);
      }
    }

    &__active {
      @include light-theme() {
        background: linear-gradient(to right, $color-gray-05, $color-white);
      }

      @include dark-theme() {
        background: linear-gradient(to right, $color-gray-65, $color-gray-80);
      }
    }
  }

  &-info {
    @include flex($direction: column, $justify: space-between);
    position: relative;
    flex: 1;
    height: 40px;
    margin: 0;
    margin-left: 12px;
    overflow: hidden;

    .ant-tag {
      border-radius: 11px;
    }

    &-name {
      font-size: 14px;
      font-weight: bold;

      @include light-theme() {
        color: #101f36;
      }

      @include dark-theme() {
        color: $color-gray-05;
      }
    }

    &-desc {
      max-width: 96%;
      @include ellipse;
      white-space: nowrap;
      // display: -webkit-box;
      // -webkit-box-orient: vertical;
      // -webkit-line-clamp: 2;
      word-break: keep-all;

      @include light-theme() {
        color: #aeaeae;
      }

      @include dark-theme() {
        color: $color-gray-25;
      }
    }
  }

  &-extra {
    height: 40px;
    @include flex($direction: column, $justify: space-between);
    margin: 0;

    &-timer {
      line-height: 18px;

      @include light-theme() {
        color: #b8bbbe;
      }

      @include dark-theme() {
        color: $color-gray-25;
      }
    }

    &-count {
      align-self: flex-end;

      .ant-badge-count {
        min-width: 18px;
        height: 18px;
        line-height: 18px;
        border-radius: 4px;

        @include light-theme() {
          background-color: $themeColor;
          // box-shadow: 0 0 0 1px $ultramarine-ui-light;
        }

        @include dark-theme() {
          background-color: $themeColor;
          // box-shadow: 0 0 0 1px $ultramarine-ui-dark;
        }
      }
    }
  }
}

.module-conversations {
  &-header {
    @include flex($direction: column, $align: center);
    width: 100%;
    // padding: 8px 16px 16px;

    &-placeholder {
      width: 100%;
      height: 24px;
      margin: 0;
      user-select: true;
      -webkit-user-select: none;
      -webkit-app-region: drag;
    }

    .avatar {
      margin-right: 8px;
      cursor: pointer;
    }

    &-search {
      width: calc(100% - 32px);
      margin: 0;
      padding: 0 16px 12px;

      & > .search_input {
        height: 28px;
        border-radius: 6px;
      }
    }
  }
}
