@import "../../styles/layers";
@import "../../styles/color";
@import "../../styles/type";
@import "../../styles/layout";
@import "../NavigationBar/styles";

%root {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100vh; // scrolling content will overflow
}

%navigation-bar {
  flex: 0 0 auto;
}

%page {
  display: flex;
  flex: 1 0 0px;
  flex-direction: column;
  align-items: center;
}

%header,
%footer {
  flex: 0 0 auto;
  width: 100%;
}

%body {
  // %body provides a positioning context for %body-inner,
  // which may be nested n levels deep in the DOM.
  position: relative;
  flex: 1 1 0px;

  // to support %legacy-sticky-footer (TODO: remove once it's not used)
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
}

%app-root {
  display: flex;
  flex-direction: column;
  align-items: center;
}

%title-block {
  width: 100%;
}

// old Murmur pages include this as a child of %body
// NOTE: not compatible with %body-inner - cannot use both on same page
%legacy-sticky-footer {
  margin-top: auto;
  width: 100%;
}

// nested (possibly deeply) descendant of %body that will adopt its dimensions
// and support a sticky footer that conforms to those dimensions
%body-inner {
  display: flex;
  align-self: center;
  max-width: $ca-layout-max-width;

  // match position & dimensions of %body
  position: static;
  height: 100%;
  width: 100%;

  @media print {
    display: block;
    position: static;
    height: auto;
    width: auto;
  }
}

%sidebar {
  width: $ca-layout-sidebar-width;
  padding: $ca-grid 0;
  overflow: visible;
  height: auto;
  position: static;
  margin: 0 $ca-grid;

  // stack sidebar and content vertically in print
  @media print {
    background-color: transparent;
    overflow: visible;
    position: static;
    width: auto;
    height: auto;
    padding: 0;
  }
}

%content {
  // to support sticky footer
  display: flex;
  flex-direction: column;
  padding: $ca-grid 0;
  flex: 1 1 auto;
  margin: 0 $ca-grid;
  max-width: $ca-layout-content-width;

  // stack sidebar and content vertically in print
  @media print {
    display: block;
    padding: 0;
    margin-left: 0;
    overflow: visible;
  }

  &:only-child {
    margin: 0 auto;
    width: 100%; // fixes centering in IE 11 at max-width
    min-width: 100%; // prevents too-wide content slipping under NavigationBarApp

    @media (min-width: 480px) {
      min-width: auto;
    }
  }
}