@import "common/foundation/mixins";

.full-page-chat {
  .channels-list {
    padding-bottom: 6rem;
    box-sizing: border-box;

    .channels-list-container {
      background: var(--secondary);
      overflow: hidden;
    }

    .chat-channel-divider {
      font-size: var(--font-up-1);

      &:first-of-type {
        padding-top: 1rem;
      }

      .channel-title {
        color: var(--primary);
        font-size: var(--font-down-1);
      }
    }

    .chat-channel-row {
      &.--threads {
        color: var(--primary);
        padding-inline: 1.5rem;
        font-size: var(--font-up-1-rem);
        border: 0;

        .chat-channel-title {
          gap: 0.5rem;
        }

        .c-unread-indicator {
          width: 8px;
          height: 8px;
        }
      }
    }

    .chat-user-avatar {
      + .chat-channel-title__usernames {
        margin-left: 1rem;
      }
    }

    .chat-channel-title {
      &__users-count {
        font-size: var(--font-up-2);
        & + .chat-channel-title__name {
          margin-left: 1rem;
        }
      }

      &__name {
        margin-left: 0.75em;
        font-size: var(--font-up-1);
      }

      &__category-badge {
        font-size: var(--font-up-1);
      }

      &__user-status-message {
        flex-shrink: 3;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.c-routes-direct-messages,
.c-routes-channels,
.c-routes-threads {
  background: var(--primary-very-low);
  max-width: 100vw;
}