@use '../../partials/text';
@use '../../partials/dir';

.header {
  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
  width: 100%;
  height: var(--header-height);
  border-bottom: 1px solid var(--bg-surface-border);
  display: flex;
  align-items: center;

  &__title-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    margin: 0 var(--sp-tight);
    
    &:first-child {
      @include dir.side(margin, 0, var(--sp-tight));
    }

    & > .text:first-child {
      @extend .cp-txt__ellipsis;
      min-width: 0;
    }
    & > .text-b3{
      flex: 1;
      min-width: 0;

      margin-top: var(--sp-ultra-tight);
      @include dir.side(margin, var(--sp-tight), 0);
      @include dir.side(padding, var(--sp-tight), 0);
      @include dir.side(border, 1px solid var(--bg-surface-border), none);

      max-height: calc(2 * var(--lh-b3));
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      display: -webkit-box;
    }
  }
}