@import '../../../../styles/common';

$individual-action-padding-x: (1.5 * spacing(tight));
$action-menu-rollup-computed-width: icon-size() + (spacing(tight) * 2);

.Header {
  @include page-header-layout;
  position: relative;
}

.separator {
  padding-bottom: spacing();
  border-bottom: border();
}

.titleHidden {
  @include visually-hidden;
}

///
/// Navigation

.Navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: spacing(extra-tight);

  // stylelint-disable-next-line selector-max-class
  .hasActionMenu.mobileView & {
    padding-right: $action-menu-rollup-computed-width;
  }
}

.BreadcrumbWrapper {
  flex: 0 1 auto;
  max-width: 100%;
}

.PaginationWrapper {
  flex: 0 0 auto;
  margin-left: auto;
  line-height: 1;
}

///
/// Main content

.MainContent {
  .Header:not(.mobileView) & {
    display: flex;
    align-items: center;
  }
}

.TitleActionMenuWrapper {
  flex: 1 1 auto;

  .Header:not(.mobileView) & {
    padding-right: spacing(loose);
  }

  // stylelint-disable-next-line selector-max-class, selector-max-specificity
  .hasActionMenu.mobileView:not(.hasNavigation) & {
    padding-right: $action-menu-rollup-computed-width;
  }
}

.PrimaryActionWrapper {
  .mobileView & {
    margin-top: spacing();
  }
}

.ActionMenuWrapper {
  margin-top: spacing(tight);

  // stylelint-disable-next-line selector-max-class
  .mobileView & {
    position: absolute;
    top: spacing(loose) + (control-height() / 4);
    right: 0;
    margin-top: 0;

    @include page-content-when-not-fully-condensed {
      right: -(spacing(tight));
    }
  }

  // stylelint-disable-next-line selector-max-class
  .mobileView.hasNavigation & {
    top: control-height() / 2;
  }
}
