.header {
  padding: {
    left: var(--sp-normal);
    right: var(--sp-extra-tight);
  }
  width: 100%;
  height: var(--header-height);
  border-bottom: 1px solid var(--bg-surface-border);
  display: flex;
  align-items: center;

  [dir=rtl] & {
    padding: {
      left: var(--sp-extra-tight);
      right: var(--sp-normal);
    }
  }

  &__title-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    margin: 0 var(--sp-tight);

    &:first-child {
      margin-left: 0;
      [dir=rtl] & {
        margin-right: 0;
      }
    }

    & > .text:first-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    & > .text-b3{
      flex: 1;
      min-width: 0;

      margin-top: var(--sp-ultra-tight);
      margin-left: var(--sp-tight);
      padding-left: var(--sp-tight);
      border-left: 1px solid var(--bg-surface-border);
      max-height: calc(2 * var(--lh-b3));
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      display: -webkit-box;

      [dir=rtl] & {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        margin-right: var(--sp-tight);
        padding-right: var(--sp-tight);
        border-right: 1px solid var(--bg-surface-border);
      }
    }
  }
}