@import "../css/colors"
@import "../css/vars"

:local
  .page
    width: 100%
    display: flex
    min-height: 100vh
    flex-direction: column
    position: relative;

  .header
    top: 0
    width: 100%
    max-width: $maxWidth
    height: 80px
    z-index: 120
    background: $white
    position: fixed;

  .contentWrapper
    display: flex

  .content
    flex: 1
    flex-basis: auto;
    margin-top: 90px;

    @media screen and (min-width: $medium)
      margin-left: 309px;

  .fullWidth
    margin-left: 0px;

  .footer
    z-index: 1
    margin-top: 30px
    flex-basis: auto;

  @media screen and (max-width: $medium - 1)
    .backdrop
      top: 80px;
      right: 0;
      bottom: 0;
      left: 0;
      overflow: hidden;
      background: #000;
      -webkit-animation: fadeInFromNone 250ms ease-out;
      -moz-animation: fadeInFromNone 250ms ease-out;
      -o-animation: fadeInFromNone 250ms ease-out;
      animation: fadeInFromNone 250ms ease-out;
      opacity: .5;
      z-index: 70;
      position: fixed;

  @media screen and (min-width: $medium)
    .page
      max-width: $maxWidth
      margin: 0 auto

    .header
      height: 80px

    .content
      padding: 0
      overflow hidden

    .footer:not(.fullWidth)
      margin-left: 309px

  // grid
  @media only screen and (min-width: 48em)
    .left
      margin-right: 5px

    .right
      margin-left: 5px

  // stacked
  @media screen and (max-width: ($medium + 1px))
    .left
      margin-bottom: 5px

    .right
      margin-top: 5px

  @media print
    .header
      position: relative

    .content
      margin-top: 10px