
// @optional core/multiple/multiple.scss

/* LAYOUT */

.layout {

  @include children-no-gutter ();
  position: relative;
  display: flex;
  align-items: stretch;

  /* HEADER / CONTENT / FOOTER */

  &-header,
  &-content,
  &-footer {
    border-radius: 0;
    flex-shrink: 0; // Avoids padding collpasing
  }

  /* HEADER */

  &-header {
    background-color: $layout-header-bg-color;
    border-color: $layout-header-border-color;
    color: $layout-header-color;
  }

  /* CONTENT */

  &-content {
    padding: $layout-content-padding-y $layout-content-padding-x;
    flex-grow: 1; // Needed for having the `.layout-footer` stick to the bottom/right
  }

  /* FOOTER */

  &-footer {
    background-color: $layout-footer-bg-color;
    border-color: $layout-footer-border-color;
    color: $layout-footer-color;
  }

}

/* FIRST LAYOUT */

// It'll almost certanly be the `body`, but just for the sake of writing it in a generic way we don't assume that

.layout {

  height: 100%; // Setting `min-height` won't work on IE 10/11

  /* NOT FIRST */

  .layout {
    height: auto;
  }

  /* GUTTER */

  .layout:not(:last-child),
  %multiple > .layout:last-child {
    margin-bottom: $gutter;
  }

}
