@use '../utils';

.str-chat__thread-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;

  .str-chat__thread-header {
    @include utils.header-layout;

    .str-chat__thread-header-details {
      @include utils.header-text-layout;

      .str-chat__thread-header-name,
      .str-chat__thread-header-reply-count,
      .str-chat__thread-header-channel-name,
      .str-chat__thread-header-subtitle,
      .str-chat__thread-header-title {
        @include utils.ellipsis-text;
      }

      .str-chat__thread-header-subtitle {
        @include utils.prevent-glitch-text-overflow;
      }
    }

    .str-chat__close-thread-button {
      $icon-size: calc(var(--str-chat__spacing-px) * 21);
      @include utils.flex-top-right;
      width: calc(var(--str-chat__spacing-px) * 40);
      height: calc(var(--str-chat__spacing-px) * 40);
      cursor: pointer;
      line-height: $icon-size;
      font-size: $icon-size;

      svg {
        height: $icon-size;
        width: $icon-size;
      }
    }
  }

  .str-chat__thread-list {
    height: auto;
  }
}

.str-chat__main-panel--hideOnThread + .str-chat__thread-container {
  // occupy the whole space by previously occupied by the main message list container
  flex: 1;
}

.str-chat__parent-message-li {
  padding: var(--str-chat__spacing-2);
}