@import '../variables/header';

@mixin euiHeaderAffordForFixed($headerHeight: $euiHeaderHeightCompensation) {
  // The `@at-root #{&}` allows for grouping alongside another specific body class.
  // When not applied inside of another selector, it simply renders with the single class
  @at-root #{&}.euiBody--headerIsFixed {
    padding-top: $headerHeight;

    // When the EuiHeader is fixed, we need to account for it in the position of the flyout
    &:not(.euiDataGrid__restrictBody) .euiFlyout,
    .euiCollapsibleNav {
      top: $headerHeight;
      height: calc(100% - #{$headerHeight});
    }

    @include euiBreakpoint('m', 'l', 'xl') {
      .euiPageSideBar--sticky {
        max-height: calc(100vh - #{$headerHeight});
        top: #{$headerHeight};
      }
    }

    &:not(.euiDataGrid__restrictBody) .euiOverlayMask[data-relative-to-header='below'] {
      top: #{$headerHeight};
    }
  }
}