// this is a set of flex-based layout containers necessary for components such as the drawer.

//WARNING: VERY MUCH A WORK IN PROGRESS!!!!!!!!!!!!!!!!!!!!

.mdb-layout-container {
  position: absolute;
  width: 100%;
  height: 100%;

  // Main layout class.
  .mdb-layout {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column; // allows for sticky header and footer
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

// Header
.mdb-layout-header { // navbar
  // FIXME: it would be nice to stick this directly on the navbar, but navbars are not flex ready, so this is relegated to be a container at this time.
  z-index: 3;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-height: 1000px;
  flex-direction: column;
  flex-wrap: nowrap;
  flex-shrink: 0;
  justify-content: flex-start;
  transition-property: max-height;

  > .navbar { // heights for common scenarios such as a header with a navbar

    // Current navbar is not flex enabled https://github.com/twbs/bootstrap/issues/18875
    //  - with flex a vertical align is a breeze
    //  - with standard layout, we need to use padding instead of height to layout.
    min-height: $mdb-layout-mobile-header-height;

    // FIXME: hack remove padding once the flex layout works properly
    $padding: ($mdb-layout-mobile-header-height - (1rem * $line-height)) / 2;
    padding-top: $padding;
    padding-bottom: $padding;

    @include media-breakpoint-up(lg) {
      min-height: $mdb-layout-desktop-header-height;

      // FIXME: hack remove padding once the flex layout works properly
      $padding: ($mdb-layout-desktop-header-height - (1rem * $line-height)) / 2;
      padding-top: $padding;
      padding-bottom: $padding;
    }
  }
}

// Content.
.mdb-layout-content {
  position: relative;
  z-index: 1;
  display: inline-block;
  //-ms-flex: 0 1 auto; // Fix IE10 bug.
  overflow-x: hidden;
  overflow-y: auto;
  flex-grow: 1;
  -webkit-overflow-scrolling: touch; // TODO: why?
}