// ********************************************
// container definition
$page-header: #{$prefix}-page-header;
$page-header-title: #{$page-header}-title;
$page-header-title-wrapper: #{$page-header}-title-wrapper;
$page-header-main-section: #{$page-header}-main-section;
$page-header-title-section: #{$page-header}-title-section;
$page-header-toolbar: #{$page-header}-toolbar;
$page-header-breadcrumb: #{$page-header}-breadcrumb;
$page-header-backarrow: #{$page-header}-backarrow;

// DIMSUM components
$btn-component: #{$prefix}-button;
$toolbar-component: #{$prefix}-toolbar;
$breadcrumb-component: #{$prefix}-breadcrumb;

$border-style: border-size() solid;

.#{$page-header-main-section} {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.#{$page-header-title-section} {
  display: flex;
  width: 100%;
}

.#{$page-header-backarrow} {
  fill: color(brand-primary, 600);
  padding-right: 5px;
  cursor: pointer;
}

.#{$page-header-toolbar} {
  flex: 1 1 0%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

_:-ms-fullscreen,
:root .#{$page-header-toolbar}--ie-flex-basis-auto {
  flex-basis: auto;
}

.#{$page-header-breadcrumb} {
  grid-area: breadcrumb;

  ol {
    margin: 0;
  }

  @include body-small-text-style();
}

.#{$page-header-title-wrapper} {
  display: flex;
  flex: 1;
  min-width: 0;
  position: relative;
  width: 100%;
}

.#{$page-header-title} {
  position: relative;
  display: flex;
  flex: 3;
  min-width: 0;
  align-items: center;

  &__editable-title {
    position: absolute;
    top: border-size() * -1;
    left: space(xs) * -1.1;
    width: 100%;
    height: fit-content;
    @include h2-text-style();
  }

  &__title {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    @include h2-text-style();
  }

  &__subtitle {
    margin: space(xxs) 0;
    color: color(neutral, 500);
  }
}

.#{$page-header} {
  margin: 0 0 space(xs);
  display: flex;
  align-items: center;
  &--with-subtitle {
    .#{$page-header-title} {
      flex-direction: column;
      align-items: flex-start;
      padding-right: space(xs);
    }
    .#{$page-header-title}__toolbar {
      align-items: flex-end;
      justify-content: flex-end;
    }
  }

  &--with-bottom-separator {
    border-bottom: border-size(s) solid color(neutral, 400);
  }

  .#{$page-header-breadcrumb} {
    & a:first-child {
      padding-left: 1px;
    }
  }
}