.c-user-thread {
  display: grid;
  grid-template-areas:
    "avatar category timestamp"
    "avatar title indicator"
    "avatar excerpt excerpt";
  grid-template-columns: auto 1fr auto;
  grid-column-gap: 0.75em;
  margin-inline: 0;
  padding: 0.5rem 1.5rem;

  .chat-channel-icon {
    grid-area: avatar;
    position: relative;

    .avatar {
      margin-top: 4px;
      width: var(--channel-list-avatar-size);
      height: var(--channel-list-avatar-size);
    }
  }

  .avatar-flair.--threads {
    position: absolute;
    top: -4px;
    right: -3px;
    background: var(--primary-low);
    border-radius: 50%;
    padding: 0.2em;
    line-height: var(--line-height-small);
    border: 2px solid var(--secondary-very-high);
    color: var(--primary-high);
  }

  .chat__thread-title-container {
    @include ellipsis;
    grid-area: title;
    .chat__thread-title {
      &__name {
        @include ellipsis;
      }
    }
  }

  .chat-channel-title {
    grid-area: category;
  }

  .chat-message-thread-indicator__last-reply-timestamp {
    grid-area: timestamp;
    font-size: var(--font-down-2-rem);
    align-self: center;
  }

  .c-user-thread__excerpt {
    @include ellipsis;
    grid-area: excerpt;
    display: flex;
    color: var(--primary-high);
  }

  .c-user-thread__excerpt-text {
    margin-left: 0.25em;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}