/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */

//
// APP-FRAME
//

.hds-app-frame {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "sidebar footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr;
  min-height: 100vh;
}

// FRAME'S CONTAINERS

.hds-app-frame__header {
  z-index: 21; // needs to stay above the main content & sidebar
  grid-area: header;

  // Make header position sticky/fixed if the viewport height is greater than 480px
  // Note: HCP in prod doesn't support newer media queries, so we use the old syntax
  // stylelint-disable-next-line media-feature-range-notation
  @media (min-height: 480px) {
    position: sticky;
    top: 0;
    right: 0;
    left: 0;
  }
}

.hds-app-frame__sidebar {
  position: sticky;
  top: 0;
  z-index: 20; // needs to stay above the main content
  grid-area: sidebar;
  height: 100vh;
  min-height: 100vh;

  // Modify sidenav layout when used together with fixed app-header
  // Note: HCP in prod doesn't support newer media queries, so we use the old syntax
  // stylelint-disable-next-line media-feature-range-notation
  @media (min-height: 480px) {
    .hds-app-frame--has-header-with-sidebar & {
      top: var(--token-app-header-height);
      height: calc(100vh - var(--token-app-header-height));
      min-height: calc(100vh - var(--token-app-header-height));
    }
  }
}

.hds-app-frame__main {
  grid-area: main;

  // This prevents content from being hidden behind the fixed app-header when the skip link is used
  .hds-app-frame--has-header-with-sidebar & {
    margin-top: calc(var(--token-app-header-height) * -1);
    padding-top: var(--token-app-header-height);
  }
}

.hds-app-frame__footer {
  grid-area: footer;
}

// MODALS "CONTAINER"

.hds-app-frame__modals {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  pointer-events: none;

  // since the content is injected via DOM manipulation, there's no issues of whitespace generated by Ember
  // that make this approach unreliable (in some cases), so we can safely use it to controls its display
  &:empty {
    display: none;
  }
}