@use '../utils/constants.scss';
@use '../utils/tokens.scss' as tokens;

$pageHeaderBaseClass: '#{constants.$prefix}page-header';

$sizes: (
  md: tokens.$bm-sem-typo-heading-lg,
  lg: tokens.$bm-sem-typo-heading-2xl,
);

.#{$pageHeaderBaseClass} {
  display: grid;
  width: 100%;
  grid-template-areas:
    'breadcrumb'
    'heading'
    'body'
    'tabs';
  color: tokens.$bm-sem-color-text-primary;

  &__breadcrumb {
    grid-area: breadcrumb;
    padding-bottom: tokens.$bm-sem-space-100;
  }

  &__heading {
    grid-area: heading;
    display: flex;
    justify-content: space-between;
    gap: tokens.$bm-sem-space-50;
    flex-wrap: wrap;
  }

  &__heading-content {
    order: 1;
    display: flex;
    gap: tokens.$bm-sem-space-50;

    @each $size, $font in $sizes {
      &--#{$size} {
        font: $font;
      }
    }
  }

  &__heading-content-before {
    order: 1;
    gap: tokens.$bm-sem-space-50;
    display: flex;
    align-items: center;
    height: 1lh;
  }

  &__heading-action {
    order: -1;
  }

  &__heading-title {
    order: 2;
    overflow-wrap: break-word;
  }

  &__heading-content-after {
    order: 3;
    display: flex;
    gap: tokens.$bm-sem-space-50;
    height: 1lh;
    align-items: center;

    .#{$pageHeaderBaseClass}__heading-action {
      order: 999;
    }
  }

  &__actions {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    gap: tokens.$bm-sem-space-50;
    order: 2;
  }

  &__body {
    grid-area: body;
    padding-top: tokens.$bm-sem-space-25;
  }

  &__tabs {
    grid-area: tabs;
    padding-top: tokens.$bm-sem-space-150;
    overflow-x: auto;
  }
}