.c-navbar-container {
  position: relative;
  border-bottom: 1px solid var(--primary-low);
  background: var(--secondary);
  box-sizing: border-box;
  display: flex;
  z-index: z("composer", "content") - 1;
  padding: 0 1rem;

  &.-clickable {
    cursor: pointer;
  }

  &.-full-title {
    .c-navbar__title {
      min-height: var(--chat-header-offset);
    }

    .c-navbar__title,
    .c-navbar__title-text {
      height: auto;
      overflow: visible;
      white-space: normal;
      text-overflow: unset;
      overflow-wrap: anywhere;
    }
  }
}

.c-navbar {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 0.25rem;
  position: relative;
  container-type: inline-size;

  .is-collapsed & {
    margin-left: 1rem;
    &__title {
      margin-left: 0 !important;
    }

    &__toggle-drawer-button {
      &:after {
        @container (inline-size) {
          content: "";
          position: absolute;
          height: 100%;
          left: -1rem;
          width: calc(100cqw - 2.3em + 1rem);
        }

        &:hover {
          color: var(--tertiary-hover);

          .d-icon {
            color: inherit;
          }
        }
      }
    }
  }

  .single-select-header {
    padding: 0.3675rem 0.584rem;
  }

  > .c-navbar__title:first-child {
    .chat-drawer & {
      margin-left: 1rem;
    }
  }
}

.c-navbar__back-button {
  height: var(--chat-header-offset);
}

.c-navbar__channel-title {
  @include ellipsis();
  font-weight: 700;
  height: var(--chat-header-offset);
  display: flex;
  align-items: center;
}

.c-navbar__title {
  display: flex;
  align-items: center;
  @include ellipsis();
  height: var(--chat-header-offset);

  &-text {
    @include ellipsis();
    font-weight: 700;
    max-width: 100%;
    vertical-align: middle;
    padding-block: 5px;

    > .d-icon {
      margin-right: 5px;
    }
  }

  .d-icon {
    vertical-align: middle;
  }
}

.c-navbar__sub-title {
  line-height: var(--line-height-small);
  font-size: var(--font-down-1-rem);
  font-weight: normal;
}

.c-navbar__threads-list-button {
  gap: 0.25rem;

  &.has-unreads {
    .d-icon-discourse-threads {
      color: var(--tertiary-med-or-tertiary);
    }
  }
}

.c-navbar__actions {
  list-style: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  height: var(--chat-header-offset);
  .d-icon {
    color: var(--primary-low-mid);
  }
}

.c-navbar__back-button ~ .c-navbar__title {
  padding-left: 0;
}