/**
 * Frame
 *
 * Frame layout a.k.a Holy Grail Layout.
 * Frame allows you to create common design patterns like header, sidebars and footer.
 * https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
 *
 * 1. Avoid the IE 10-11 `min-height` bug.
 * 2. Set `flex-shrink` to `0` to prevent some browsers from
 *    letting these items shrink to smaller than their content's default
 *    minimum size. See http://bit.ly/1Mn35US for details.
 * 3. Use `%` instead of `vh` since `vh` is buggy in older mobile Safari.

 */

/*
 * NOTE: This design pattern should be created with CSS Grid once our browsersupport drops IE11
 * https://alligator.io/css/css-grid-holy-grail-layout/
 */

.l-Frame {
  display: flex;
  flex-direction: column;
  height: 100%; /* 1, 3 */
}

.l-Frame__header,
.l-Frame__footer {
  flex: none; /* 2 */
}

.l-Frame__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.l-Frame__main {
  flex: 1;
  min-height: 100%;
  overflow-y: auto;
}

@media (--bp4) {
  .l-Frame__body {
    flex-direction: row;
  }

  .l-Frame__left {
    flex-basis: var(--frameLeftWidth);
    flex-grow: 0;
    width: var(--frameLeftWidth);
  }

  .l-Frame__right {
    flex-basis: var(--frameRightWidth);
    flex-grow: 0;
    width: var(--frameRightWidth);
  }
}