// ============================================================================
// :: Root
// ============================================================================
/**
 * The main root layout component that defines how the entire layout behaves
 * on different devices, the roots splits up the content in blocks and
 * determines where everything is positioned.
 */

// ============================================================================
// :: Root
// ============================================================================
.l-root {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100vh;
  overflow: hidden;

  background-color: $background-color-white;

  @include respond-at($breakpoint-tablet-default) {
    flex-direction: row;
    align-items: stretch;

    background-color: $background-color-base;
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.l-root__view {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-grow: 1;
  order: 1;
  width: 100%;
  height: 100%;
  overflow: auto;

  // Mobile: do not scroll the shell — scroll `main.l-root__content` instead so
  // padding-bottom reliably clears the fixed `.o-menu` (see _menu.scss).
  @include respond-to($breakpoint-tablet-default) {
    overflow: hidden;
    min-height: 0;
  }

  @include respond-at($breakpoint-tablet-default) {
    height: 100vh;
    order: 2;
  }
}

.l-root__header {
  position: relative;
  z-index: $z-index-atmosphere - 1;
}

.l-root__content {
  height: 100%;

  /**
    * Works only on safari and is meant to fix the body-overflow issue that has
    * plagued safari and every developer for 3 years.
    */
  -webkit-overflow-scrolling: touch;

  @include respond-to($breakpoint-tablet-default) {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
  }

  @include respond-at($breakpoint-tablet-default) {
    flex: none;
    height: 100%;
    overflow: visible;
    padding: 3rem $container-spacing-tablet-default;
  }

  @include respond-at($breakpoint-desktop-default) {
    padding: 4rem $container-spacing-desktop-default;
  }

  @include respond-at($breakpoint-desktop-large) {
    padding: 5rem $container-spacing-desktop-large;
  }
}

// Fixed bottom nav (mobile): inset scrollable main — single place, all pages.
.l-root:not(.has-no-menu) .l-root__content {
  @include respond-to($breakpoint-tablet-default) {
    padding-bottom: calc(172px + env(safe-area-inset-bottom));
    padding-bottom: calc(172px + constant(safe-area-inset-bottom));
  }
}

.l-root.has-no-menu .l-root__content {
  @include respond-to($breakpoint-tablet-default) {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
    padding-bottom: calc(56px + constant(safe-area-inset-bottom));
  }
}

.l-root__menu {
  z-index: $z-index-sky;

  order: 2;
  width: 100%;

  transition: transform 0.5s ease-in-out;

  @include respond-at($breakpoint-tablet-default) {
    order: 1;
    width: auto;
    min-width: $menu-min-width-desktop;
  }
}

// When text is large, force min-width to 18rem (overrides desktop var)
html[data-text-zoom="large"],
html[data-text-zoom="xlarge"] {
  .l-root__menu {
    @include respond-at($breakpoint-tablet-default) {
      min-width: 18rem;
    }
  }
}

// ============================================================================
// :: States
// ============================================================================
.l-root {
  &.has-overlay-open {

    &,
    .l-root__content {
      overflow: hidden;
    }
  }

  &.has-no-menu {
    .l-root__menu {
      @include respond-to($breakpoint-tablet-default) {
        transform: translateY(200%);
      }
    }
  }
}