.base {
  display: flex;
  flex-grow: 1;
  height: 100vh;
  overflow: hidden;

  [class*='NavigationSideBar_base_'] {
    flex-grow: 0;
    position: relative;

    // Avoid setting anything else with a z-index of 100 or higher  in the non-nav/main content area
    z-index: 100;
  }
  [class*='NavigationTabbar_base'] {
    display: none;
    flex-grow: 0;

    // Avoid setting anything else with a z-index of 100 or higher  in the non-nav/main content area
    z-index: 100;
  }
  & > main {
    flex-grow: 1;
    height: 100%;
    overflow: auto;
  }

  @media only screen and (max-width: $breakpoint-mobile) {
    flex-direction: column;

    [class*='NavigationSideBar_base_'] {
      display: none;
    }
    [class*='NavigationTabbar_base'] {
      display: flex;
    }
    & > main {
      height: calc(var(--vh, 1vh) * 100 - var(--nav-bottom-bar-height));
    }
  }
}

// If clusterMessage is present on page, override some heights to make room

.clusterMessage {
  --cluster-message-height: 40px;
  height: calc(100vh - var(--cluster-message-height));

  @media only screen and (max-width: $breakpoint-mobile) {
    & > main {
      height: calc(
        var(--vh, 1vh) * 100 - var(--nav-bottom-bar-height) - var(--cluster-message-height)
      );
    }
  }
}
