@use '../../sass-utilities' as *;

// stylelint-disable
$pf-page-v6--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
$pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
// stylelint-enable

@include pf-root($page) {
  --#{$page}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
  --#{$page}--inset: var(--pf-t--global--spacer--inset--page-chrome);

  // Header
  --#{$page}--c-masthead--ZIndex: var(--pf-t--global--z-index--md);

  // Sidebar
  --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
  --#{$page}__sidebar--Width--base: #{pf-size-prem(290px)};
  --#{$page}__sidebar--Width: var(--#{$page}__sidebar--Width--base);
  --#{$page}__sidebar--xl--Width: var(--#{$page}__sidebar--Width--base);
  --#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
  --#{$page}__sidebar--BoxShadow: var(--pf-t--global--box-shadow--md--right);

  // TODO Reduced Motion default needed
  --#{$page}__sidebar--TransitionProperty: opacity;
  --#{$page}__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
  --#{$page}__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
  --#{$page}__sidebar--TranslateX: -100%;
  --#{$page}__sidebar--Opacity: 0;
  --#{$page}__sidebar--m-expanded--Opacity: 1;
  --#{$page}__sidebar--xl--Opacity: 1;
  --#{$page}__sidebar--TranslateZ: 0;
  --#{$page}__sidebar--m-expanded--TranslateX: 0;
  --#{$page}__sidebar--xl--TranslateX: 0;
  --#{$page}__sidebar--MarginInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2);
  --#{$page}__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
  --#{$page}__sidebar--PaddingInlineStart: 0;
  --#{$page}__sidebar--PaddingInlineEnd: 0;
  --#{$page}__sidebar--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
  --#{$page}__sidebar--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);

  @media screen and (prefers-reduced-motion: no-preference) {
    --#{$page}__sidebar--Opacity: 1;
    --#{$page}__sidebar--TransitionProperty: transform;
    --#{$page}__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
  }

  // Sidebar header
  --#{$page}__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
  --#{$page}__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
  --#{$page}__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
  --#{$page}__sidebar-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
  --#{$page}__sidebar-title--PaddingInlineStart: var(--pf-t--global--spacer--lg);
  --#{$page}__sidebar-title--FontSize: var(--pf-t--global--font--size--heading--xs);
  --#{$page}__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading);
  --#{$page}__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading);
  --#{$page}__sidebar-title--FontWeight: var(--pf-t--global--font--weight--heading--default);

  // Sidebar body
  --#{$page}__sidebar-body--PaddingInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2);
  --#{$page}__sidebar-body--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
  --#{$page}__sidebar-body--m-page-insets--PaddingInlineEnd: var(--#{$page}--inset);
  --#{$page}__sidebar-body--m-page-insets--PaddingInlineStart: var(--#{$page}--inset);
  --#{$page}__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
  --#{$page}__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);

  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
    --#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--xl--TranslateX);
    --#{$page}__sidebar--Opacity: var(--#{$page}__sidebar--xl--Opacity);
    --#{$page}__sidebar--BorderInlineEndWidth: 0;
  }

  // Container for the main content area (grid area)
  --#{$page}__main-container--ZIndex: var(--pf-t--global--z-index--xs);
  --#{$page}__main-container--GridArea: main;
  --#{$page}--masthead--main-container--GridArea: sidebar / sidebar / main / main; // no sidebar
  --#{$page}__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
  --#{$page}__main-container--AlignSelf: start;
  --#{$page}__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
  --#{$page}__main-container--MarginInlineStart: var(--#{$page}--inset);
  --#{$page}__main-container--MarginInlineEnd: var(--#{$page}--inset);
  --#{$page}__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
  --#{$page}__main-container--BorderBlockStartWidth: var(--pf-t--global--border--width--main--default);
  --#{$page}__main-container--BorderBlockEndWidth: var(--pf-t--global--border--width--main--default);
  --#{$page}__main-container--BorderInlineStartWidth: var(--pf-t--global--border--width--main--default);
  --#{$page}__main-container--BorderInlineEndWidth: var(--pf-t--global--border--width--main--default);
  --#{$page}__main-container--BorderColor: var(--pf-t--global--border--color--main--default); 
  --#{$page}__main-container--xs--AlignSelf: stretch;
  --#{$page}__main-container--xs--BorderRadius: 0;
  --#{$page}__main-container--xs--MarginInlineStart: 0;
  --#{$page}__main-container--xs--MaxHeight: 100%;
  --#{$page}__main-container--xs--MarginInlineEnd: 0;
  --#{$page}__main-container--xs--BorderBlockEndWidth: 0;
  --#{$page}__main-container--xs--BorderInlineStartWidth: 0px; // needs a unit because it's used in calc()
  --#{$page}__main-container--xs--BorderInlineEndWidth: 0px; // needs a unit because it's used in calc()

  @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--md)) {
    --#{$page}__main-container--MarginInlineStart: var(--#{$page}__main-container--xs--MarginInlineStart);
    --#{$page}__main-container--MarginInlineEnd: var(--#{$page}__main-container--xs--MarginInlineEnd);
    --#{$page}__main-container--BorderBlockEndWidth: var(--#{$page}__main-container--xs--BorderBlockEndWidth);
    --#{$page}__main-container--BorderInlineStartWidth: var(--#{$page}__main-container--xs--BorderInlineStartWidth);
    --#{$page}__main-container--BorderInlineEndWidth: var(--#{$page}__main-container--xs--BorderInlineEndWidth);
  }

  // Main section
  --#{$page}__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
  --#{$page}__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg); // This is the intended spacing - the border of the main section will be subtracted
  --#{$page}__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
  --#{$page}__main-section--PaddingInlineStart: var(--pf-t--global--spacer--lg); // This is the intended spacing - the border of the main section will be subtracted
  --#{$page}__main-section--RowGap: var(--pf-t--global--spacer--lg);
  --#{$page}__main-breadcrumb--main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
  --#{$page}__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
  --#{$page}__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
  --#{$page}__main-breadcrumb--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md);

  // Limit width
  --#{$page}--section--m-limit-width--MaxWidth: calc(#{pf-size-prem(2000px)} - var(--#{$page}__sidebar--Width));

  // Sticky
  --#{$page}--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
  --#{$page}--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
  --#{$page}--section--m-sticky-top--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
  --#{$page}--section--m-sticky-top--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
  --#{$page}--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
  --#{$page}--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
  --#{$page}--section--m-sticky-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
  --#{$page}--section--m-sticky-bottom--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);

  // Shadows
  --#{$page}--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
  --#{$page}--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
  --#{$page}--section--m-shadow-bottom--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
  --#{$page}--section--m-shadow-bottom--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
  --#{$page}--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
  --#{$page}--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs);
  --#{$page}--section--m-shadow-top--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
  --#{$page}--section--m-shadow-top--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);

  // Main section horizontal subnav
  --#{$page}__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
  --#{$page}__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md);
  --#{$page}__main-subnav--PaddingBlockEnd: 0;
  --#{$page}__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderInlineStartWidth));
  --#{$page}__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderInlineEndWidth));
  --#{$page}__main-subnav--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);

  // Main section breadcrumb
  --#{$page}__main-breadcrumb--PaddingBlockStart: var(--pf-t--global--spacer--md);
  --#{$page}__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderInlineEndWidth)); // subtract the border of the main section
  --#{$page}__main-breadcrumb--PaddingBlockEnd: 0;
  --#{$page}__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderInlineStartWidth)); // subtract the border of the main section
  --#{$page}__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
  --#{$page}__main-breadcrumb--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);

  // Main section tabs
  --#{$page}__main-tabs--PaddingBlockStart: 0;
  --#{$page}__main-tabs--PaddingInlineEnd: 0;
  --#{$page}__main-tabs--PaddingBlockEnd: 0;
  --#{$page}__main-tabs--PaddingInlineStart: 0;
  --#{$page}__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);

  // Wizard main section
  --#{$page}__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
  --#{$page}__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
  --#{$page}__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);

  // Drawer section
  --#{$page}__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
  --#{$page}__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
}

.#{$page} {
  // Base
  display: grid;
  grid-template-areas:
    "header"
    "main";
  grid-template-rows: max-content 1fr;
  grid-template-columns: 1fr;
  height: 100vh;
  height: 100dvh;
  max-height: 100%;
  background-color: var(--#{$page}--BackgroundColor);

  @media (min-width: $pf-v6-global--breakpoint--xl) {
    --#{$page}__sidebar--Width: var(--#{$page}__sidebar--xl--Width); // TODO can remove at breaking change

    grid-template-areas:
      "header header"
      "sidebar main";
    grid-template-columns: var(--#{$page}__sidebar--Width) 1fr;
  }

  // Hamburger menu animation
  // mobile - show expand on hover
  > .#{$masthead} .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
    @include pf-v6-hamburger;
  }

  // mobile - show collapse when sidebar expanded
  &:where(:has(> .#{$page}__sidebar.pf-m-expanded)) > .#{$masthead} .#{$masthead}__toggle :is(.#{$button}.pf-m-hamburger, .#{$button}.pf-m-hamburger:hover, .#{$button}.pf-m-hamburger:focus-visible) {
    @include pf-v6-hamburger($collapse: true);
  }

  @media (min-width: $pf-v6-global--breakpoint--xl) {
    // desktop - disable default arrow
    > .#{$masthead} .#{$masthead}__toggle .#{$button}.pf-m-hamburger,
    &:where(:has(> .#{$page}__sidebar.pf-m-expanded)) > .#{$masthead} .#{$masthead}__toggle :is(.#{$button}.pf-m-hamburger, .#{$button}.pf-m-hamburger:hover, .#{$button}.pf-m-hamburger:focus-visible) {
      @include pf-v6-hamburger($reset: true);
    }

    // desktop - show collapse on hover
    > .#{$masthead} .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
      @include pf-v6-hamburger($collapse: true);
    }

    // desktop - show expand on hover when sidebar collapsed
    &:where(:has(> .#{$page}__sidebar.pf-m-collapsed)) > .#{$masthead} .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
      @include pf-v6-hamburger;
    }
  }
}

// Header
.#{$page} > .#{$masthead} {
  @media (min-width: $pf-v6-global--breakpoint--xl) {
    --#{$masthead}--m-display-inline--GridTemplateColumns: var(--#{$masthead}--m-display-inline--breakpoint--xl--GridTemplateColumns);
  }

  z-index: var(--#{$page}--c-masthead--ZIndex);
  grid-area: header;
}

// Sidebar
.#{$page}__sidebar {
  z-index: var(--#{$page}__sidebar--ZIndex);
  display: flex;
  flex-direction: column;
  grid-area: sidebar;
  grid-row-start: 2;
  grid-column-start: 1;
  width: var(--#{$page}__sidebar--Width);
  padding-block-start: 0;
  padding-block-end: var(--#{$page}__sidebar--PaddingBlockEnd);
  padding-inline-start: var(--#{$page}__sidebar--PaddingInlineStart);
  padding-inline-end: var(--#{$page}__sidebar--PaddingInlineEnd);
  margin-inline-end: var(--#{$page}__sidebar--MarginInlineEnd);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--#{$page}__sidebar--BackgroundColor);
  border-inline-end: var(--#{$page}__sidebar--BorderInlineEndWidth) solid var(--#{$page}__sidebar--BorderInlineEndColor);
  opacity: var(--#{$page}__sidebar--Opacity);
  transition: var(--#{$page}__sidebar--TransitionProperty) var(--#{$page}__sidebar--TransitionDuration) var(--#{$page}__sidebar--TransitionTimingFunction);

  @include pf-v6-bidirectional-style(
    $prop: transform,
    $ltr-val: translateX(var(--#{$page}__sidebar--TranslateX)) translateZ(var(--#{$page}__sidebar--TranslateZ)),
    $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$page}__sidebar--TranslateX))}) translateZ(var(--#{$page}__sidebar--TranslateZ))
  );

  // Mobile
  // Expanded nav
  &.pf-m-expanded {
    --#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--m-expanded--TranslateX);
    --#{$page}__sidebar--Opacity: var(--#{$page}__sidebar--m-expanded--Opacity);

    box-shadow: var(--#{$page}__sidebar--BoxShadow);

    @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
      --#{$page}__sidebar--BoxShadow: var(--#{$page}__sidebar--BoxShadow);
    }
  }

  // Desktop
  // Collapse nav
  &.pf-m-collapsed {
    max-width: 0;
    overflow: hidden;
  }
}

.#{$page}__sidebar-header {
  padding-block-start: var(--#{$page}__sidebar-header--PaddingBlockStart);
  padding-block-end: var(--#{$page}__sidebar-header--PaddingBlockEnd);
  border-block-end: var(--#{$page}__sidebar-header--BorderBlockEndWidth) solid var(--#{$page}__sidebar-header--BorderBlockEndColor);
}

.#{$page}__sidebar-title {
  padding-inline-start: var(--#{$page}__sidebar-title--PaddingInlineStart);
  font-family: var(--#{$page}__sidebar-title--FontFamily);
  font-size: var(--#{$page}__sidebar-title--FontSize);
  font-weight: var(--#{$page}__sidebar-title--FontWeight);
  line-height: var(--#{$page}__sidebar-title--LineHeight);
}

.#{$page}__sidebar-body {
  padding-inline-start: var(--#{$page}__sidebar-body--PaddingInlineStart);
  padding-inline-end: var(--#{$page}__sidebar-body--PaddingInlineEnd);

  &:last-child {
    flex-grow: 1;
  }

  &.pf-m-page-insets {
    --#{$page}__sidebar-body--PaddingInlineEnd: var(--#{$page}__sidebar-body--m-page-insets--PaddingInlineEnd);
    --#{$page}__sidebar-body--PaddingInlineStart: var(--#{$page}__sidebar-body--m-page-insets--PaddingInlineStart);
  }

  &.pf-m-context-selector {
    --#{$page}__sidebar-body--PaddingInlineEnd: var(--#{$page}__sidebar-body--m-context-selector--PaddingInlineEnd);
    --#{$page}__sidebar-body--PaddingInlineStart: var(--#{$page}__sidebar-body--m-context-selector--PaddingInlineStart);
  }

  &.pf-m-inset-none {
    --#{$page}__sidebar-body--PaddingInlineEnd: 0;
    --#{$page}__sidebar-body--PaddingInlineStart: 0;
  }

  &.pf-m-fill {
    flex-grow: 1;
  }

  &.pf-m-no-fill {
    flex-grow: 0;
  }
}

.#{$page}__main-subnav,
.#{$page}__main-breadcrumb,
.#{$page}__main-tabs,
.#{$page}__main-section,
.#{$page}__main-wizard {
  &.pf-m-limit-width {
    > .#{$page}__main-body {
      max-width: var(--#{$page}--section--m-limit-width--MaxWidth);
    }

    &.pf-m-align-center {
      align-items: center;

      > .#{$page}__main-body {
        width: 100%;
      }
    }
  }
}

.#{$page}__main-breadcrumb,
.#{$page}__main-tabs,
.#{$page}__main-section,
.#{$page}__main-wizard,
.#{$page}__main-group,
.#{$page}__main-subnav {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;

  &.pf-m-overflow-scroll {
    position: relative;
    flex-shrink: 1;
    overflow: auto;
  }

  &.pf-m-shadow-bottom {
    z-index: var(--#{$page}--section--m-shadow-bottom--ZIndex);
    border-block-end: var(--#{$page}--section--m-shadow-bottom--BorderBlockEndWidth) solid var(--#{$page}--section--m-shadow-bottom--BorderBlockEndColor);
    box-shadow: var(--#{$page}--section--m-shadow-bottom--BoxShadow);
  }

  &.pf-m-shadow-top {
    z-index: var(--#{$page}--section--m-shadow-top--ZIndex);
    border-block-start: var(--#{$page}--section--m-shadow-top--BorderBlockStartWidth) solid var(--#{$page}--section--m-shadow-top--BorderBlockStartColor);
    box-shadow: var(--#{$page}--section--m-shadow-top--BoxShadow);
  }

  // Responsive height modifiers for sticky top/bottom
  @each $breakpoint, $breakpoint-value in $pf-page-v6--height-breakpoint-map {
    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");

    @include pf-v6-apply-height-breakpoint($breakpoint) {

      &.pf-m-sticky-top#{$breakpoint-name} {
        position: sticky;
        inset-block-start: 0;
        z-index: var(--#{$page}--section--m-sticky-top--ZIndex);
        border-block-end: var(--#{$page}--section--m-sticky-top--BorderBlockEndWidth) solid var(--#{$page}--section--m-sticky-top--BorderBlockEndColor);
        box-shadow: var(--#{$page}--section--m-sticky-top--BoxShadow);
      }

      &.pf-m-sticky-bottom#{$breakpoint-name} {
        position: sticky;
        inset-block-end: 0;
        z-index: var(--#{$page}--section--m-sticky-bottom--ZIndex);
        border-block-start: var(--#{$page}--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--#{$page}--section--m-sticky-bottom--BorderBlockStartColor);
        box-shadow: var(--#{$page}--section--m-sticky-bottom--BoxShadow);
      }
    }
  }
}

// Main & Drawer
.#{$page}__main-container {
  display: flex;
  flex-direction: column;
  align-self: var(--#{$page}__main-container--AlignSelf);
  max-height: var(--#{$page}__main-container--MaxHeight);
  margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
  margin-inline-end: var(--#{$page}__main-container--MarginInlineEnd);
  background: var(--#{$page}__main-container--BackgroundColor);
  border: solid var(--#{$page}__main-container--BorderColor);
  border-block-start-width: var(--#{$page}__main-container--BorderBlockStartWidth);
  border-block-end-width: var(--#{$page}__main-container--BorderBlockEndWidth);
  border-inline-start-width: var(--#{$page}__main-container--BorderInlineStartWidth);
  border-inline-end-width: var(--#{$page}__main-container--BorderInlineEndWidth);
  border-radius: var(--#{$page}__main-container--BorderRadius);

  @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--md)) {
    --#{$page}__main-container--AlignSelf: var(--#{$page}__main-container--xs--AlignSelf);
    --#{$page}__main-container--MaxHeight: var(--#{$page}__main-container--xs--MaxHeight);
    --#{$page}__main-container--BorderRadius: var(--#{$page}__main-container--xs--BorderRadius);
  }
}

.#{$page}__main-container,
.#{$page}__drawer {
  z-index: var(--#{$page}__main-container--ZIndex);
  grid-area: var(--#{$page}__main-container--GridArea);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
    @at-root .#{$page}.pf-m-no-sidebar,
    .#{$masthead} + &,
    .#{$page}__sidebar.pf-m-collapsed + & {
      --#{$page}__main-container--GridArea: var(--#{$page}--masthead--main-container--GridArea);
    }

    .#{$page}__sidebar:not(.pf-m-collapsed) + & {
      --#{$page}__main-container--MarginInlineStart: 0;
    }
  }

  &.pf-m-fill,
  &:has(.#{$page}__main-wizard) {
    align-self: stretch;
  }


  &:focus {
    outline: 0;
  }
}

.#{$page}__main,
.#{$page}__main-drawer,
.#{$page}__main-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.#{$page}__main {
  overflow: auto;
}

.#{$page}__main-subnav {
  padding-block-start: var(--#{$page}__main-subnav--PaddingBlockStart);
  padding-block-end: var(--#{$page}__main-subnav--PaddingBlockEnd);
  padding-inline-start: var(--#{$page}__main-subnav--PaddingInlineStart);
  padding-inline-end: var(--#{$page}__main-subnav--PaddingInlineEnd);
  background-color: var(--#{$page}__main-subnav--BackgroundColor);

  &.pf-m-sticky-top {
    padding-block-end: var(--#{$page}__main-subnav--m-sticky-top--PaddingBlockEnd);
  }
}

.#{$page}__main-breadcrumb {
  padding-block-start: var(--#{$page}__main-breadcrumb--PaddingBlockStart);
  padding-block-end: var(--#{$page}__main-breadcrumb--PaddingBlockEnd);
  padding-inline-start: var(--#{$page}__main-breadcrumb--PaddingInlineStart);
  padding-inline-end: var(--#{$page}__main-breadcrumb--PaddingInlineEnd);
  background-color: var(--#{$page}__main-breadcrumb--BackgroundColor);

  + .#{$page}__main-section {
    --#{$page}__main-section--PaddingBlockStart: var(--#{$page}__main-breadcrumb--main-section--PaddingBlockStart);
  }

  // Responsive height modifiers for sticky top/bottom
  @each $breakpoint, $breakpoint-value in $pf-page-v6--height-breakpoint-map {
    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");

    @include pf-v6-apply-height-breakpoint($breakpoint) {
      &.pf-m-sticky-top#{$breakpoint-name},
      .#{$page}__main-group.pf-m-sticky-top#{$breakpoint-name} &:last-child {
        --#{$page}__main-breadcrumb--PaddingBlockEnd: var(--#{$page}__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
      }
    }
  }
}

.#{$page}__main-tabs {
  padding-block-start: var(--#{$page}__main-tabs--PaddingBlockStart);
  padding-block-end: var(--#{$page}__main-tabs--PaddingBlockEnd);
  padding-inline-start: var(--#{$page}__main-tabs--PaddingInlineStart);
  padding-inline-end: var(--#{$page}__main-tabs--PaddingInlineEnd);
  background-color: var(--#{$page}__main-tabs--BackgroundColor);

  .#{$page}__main-breadcrumb + & {
    --#{$page}__main-tabs--PaddingBlockStart: var(--#{$page}__main-breadcrumb--page__main-tabs--PaddingBlockStart);
  }
}

.#{$page}__main-section,
.#{$page}__main-group,
.#{$page}__main-wizard {
  &.pf-m-fill {
    flex-grow: 1;
  }

  &.pf-m-no-fill {
    flex-grow: 0;
  }
}

.#{$page}__main-section {
  gap: var(--#{$page}__main-section--RowGap);
  padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
  padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
  padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderInlineStartWidth));
  padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderInlineEndWidth));
  background-color: var(--#{$page}__main-section--BackgroundColor);

  &.pf-m-secondary {
    --#{$page}__main-section--BackgroundColor: var(--#{$page}__main-section--m-secondary--BackgroundColor);
  }

  @each $breakpoint, $breakpoint-value in $pf-page-v6--breakpoint-map {
    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");

    @include pf-v6-apply-breakpoint($breakpoint) {
      // stylelint-disable max-nesting-depth
      &.pf-m-padding#{$breakpoint-name} {
        padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
        padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
        padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderInlineStartWidth));
        padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderInlineEndWidth));
      }

      &.pf-m-no-padding#{$breakpoint-name} {
        padding: 0;
      }
      // stylelint-enable
    }
  }
}

.#{$page}__main-wizard {
  flex: 1 1;
  min-height: 0;
  background-color: var(--#{$page}__main-wizard--BackgroundColor);
  border-block-start: var(--#{$page}__main-wizard--BorderBlockStartWidth) solid var(--#{$page}__main-wizard--BorderBlockStartColor);

  &:first-child {
    --#{$page}__main-wizard--BorderBlockStartWidth: 0;
  }
}

.#{$page}__main-wizard .#{$page}__main-body {
  min-height: 0;
}

.#{$page}__main-group {
  flex-shrink: 0;
}

.#{$page}__drawer {
  > .#{$drawer} > .#{$drawer}__main > .#{$drawer}__panel {
    border-block-start: var(--#{$page}__drawer--c-drawer--BorderBlockStartWidth) solid var(--#{$page}__drawer--c-drawer--BorderBlockStartColor);
  }
  .#{$page}__main-container {
    align-self: revert;

    &.pf-m-fill {
      flex-grow: 1;
    }
  }
}