@import "../../../../styles/app";

.chat-list-section {
  display: flex;
  flex-direction: column;

  .personal-chats,
  .group-chats {
    overflow: auto;
    flex: 1;
    @include chat-scrollbar(rgba($text-muted, 0.15), 0);
  }

  .all-chats {
    overflow: auto;
    flex: 1;
    @include chat-scrollbar(rgba($text-muted, 0.15), 0);
  }

  .chat-list {
    margin: 0 (-$chat-component-padding) (-$chat-component-padding);
  }

  .chat-list-item {
    padding-left: $chat-component-padding;

    .chat-list-item-wrapper {
      display: flex;
      align-items: center;
      padding: ($spacer) $chat-component-padding ($spacer) 0;

      .avatars-column {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;

        li {
          height: 15px;
          display: flex;
          align-items: center;
        }
      }
    }

    .chat-item-main {
      flex: 1;
      min-width: 0;
    }

    .chat-title {
      margin-bottom: 0;
      display: flex;
      align-items: center;

      .group-chat-icon {
        width: 15px;
      }
    }

    .chat-last-message {
      margin: 0;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .chat-last-message,
    .timestamp {
      color: $text-muted;
    }

    .owner-indicator {
      color: lighten($text-muted, 20%);
    }

    &:hover {
      cursor: pointer;
      background: rgba(0, 0, 0, 0.01);
    }

    &.active {
      background: lighten($purple, 15%);
    }

    &.active {
      .chat-title,
      .chat-last-message,
      .timestamp,
      .owner-indicator {
        color: $white;
      }

    }

    &.active {
      .chat-title {
        font-weight: $font-weight-semi-bold;
      }
    }
  }

  .chat-list-item + .chat-list-item {
    .chat-list-item-wrapper {
      border-top: 1px solid $border-color;
    }

    &.active .chat-list-item-wrapper {
      border-top-color: lighten($purple, 15%);
    }
  }
}
