@use '../../../../scss/mixins';
@use '../../../../scss/main_screen/_navbar';

// FYI there is also `_main_screen.scss`.

:global(.main-screen.small-screen.chat-view-open) {
  .chatListAndHeaderAndAudioPlayer {
    display: none;
  }
}
:global(.main-screen.small-screen:not(.chat-view-open)) {
  .chatView {
    display: none;
  }
}

.chatListAndHeaderAndAudioPlayer {
  display: flex;
  flex-direction: column;

  // See below, `.chatView`'s flex-grow.
  width: 0;
  flex-grow: 3;

  min-width: 295px;

  .chatListAndHeader {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .chatListHeader {
    @include navbar.navbar;
    display: flex;
    align-items: center;
    padding: 0px 10px;

    > button {
      margin-inline-start: 8px;
    }

    .highlight {
      align-items: center;
      justify-content: center;
      color: var(--navBarText);
      border-radius: 10px;
      height: 24px;
      min-width: 24px;
      padding-block: 0;
      padding-inline: 1px 0;

      &:hover {
        background-color: var(--navBarButtonHover);
      }
    }

    .archivedChatsTitle {
      flex: 1 1 auto;
      overflow-x: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 18px;
      user-select: none;
    }
  }
}
.chatView {
  // Otherwise e.g. the contents of the gallery view
  // (tabs, sepcifically) will refuse to shrink,
  // and this element (`.chatView`) will overflow the parent.
  // Also this ensures that `.chatListAndHeaderAndAudioPlayer`
  // and `.chatView` take respectively 3 and 8 parts
  // of the width of the parent on wide screens.
  width: 0;
  flex-grow: 8;
}
