$side-padding:3em;

body, html{
  position: relative;
  width: 100%;
  height:100%;
  font-family: sans-serif;
  font-style: normal;
  margin:0;
  padding:0;
}

body{
  overflow:hidden;
}

#root{
  display: flex;
  flex-direction: column;
  width: 100vw;
  max-width: 1920px;
  height:100vh;
  // ? https://www.bram.us/2020/05/06/100vh-in-safari-on-ios/
  @supports (-webkit-touch-callout: none) {
    height: -webkit-fill-available;
  }
  margin:0 auto;
  %layout-element{
    width:100vw;
    max-width: 1920px;
    box-sizing:border-box;
  }
  header[role="banner"]{
    z-index:10;
    flex: 0 0 auto;
    @extend %layout-element;
    padding:1em $side-padding 1em $side-padding;
    @media only screen and (max-width: $small-bp), (orientation: portrait) {
      padding:1em $side-padding/2 0 $side-padding/2;
    }
    // iphone
    @media only screen and (max-width: $iphone-bp), (orientation: portrait) {
      padding:1em $side-padding/2 1em $side-padding/2;
    }
  }
  section[role="main-content"]{
    display: flex;
    flex:1 1 auto;
    @extend %layout-element;
    overflow: hidden;
    position: relative;
    >.wrapper{
      position: relative;
      padding:0 $side-padding 0 $side-padding;
      // height:100%; max-height:100%;
      display: flex;
      flex: 1;
      overflow-y: hidden;
      overflow-x: hidden;
      >*{
        @include fade-transition;
      }
      @media only screen and (max-width: $small-bp), (orientation: portrait) {
        overflow-y: auto;
        padding:0 $side-padding/2 0 $side-padding/2;
      }
      // iphone
      @media only screen and (max-width: $iphone-bp), (orientation: portrait) {
        // padding:0 $side-padding/4 0 $side-padding/4;
      }
    }
    .main-content-layout{
      position: relative;
      // https://stackoverflow.com/a/33644245
      display: flex;
      flex: 1;
      >section{
        max-height: 100%;
      }
      >header,
      >section>.wrapper,
      >nav{
        box-sizing: border-box;
        max-height: 100%;
        padding-top:$base-line;
      }
      >section>.wrapper,
      >nav{
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
    }
    @media only screen and (max-width: $small-bp), (orientation: portrait) {
      .main-content-layout{
        display: flex;
        flex-direction: column;
      }
    }
    @media (orientation: portrait) {
      .main-content-layout{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
      }
    }
  }
  footer[role="tools"]{
    flex:0 0 auto;
    @extend %layout-element;
    // padding-bottom: 1em;
    // >*{
    //   padding:0.5em 1em;
    // }
  }
}