.layout
  width 100%
  min-height 100vh

.layout-header
  box-shadow $layout-header-shadow

.layout-footer
  box-shadow $layout-footer-shadow

.layout-aside
  position absolute
  top 0
  bottom 0
  background $layout-aside-background
  &.fixed
    z-index $z-side
    &.on-layout
      box-shadow $layout-aside-shadow
  &.on-top
    z-index $z-fixed-side
.layout-aside-left
  left 0
  width $layout-aside-left-width
.layout-aside-right
  right 0
  width $layout-aside-right-width

main, .layout, .layout-header, .layout-footer
  position relative

.layout-header, .layout-footer
  z-index $z-marginals

.layout-backdrop
  z-index ($z-fixed-side - 1)
  background $dimmed-background

.layout-side-opener
  z-index ($z-marginals + 1)
  height 100vh
  width 15px

body.with-layout-side-opened
  overflow hidden

body.cordova.platform-ios
  .layout-header > .s-toolbar:first-child, .layout-aside.top-padding
    padding-top $ios-statusbar-height
    min-height ($toolbar-min-height + $ios-statusbar-height)

.layout-padding
  @media (max-width $breakpoint-sm-max)
    padding 1.5rem .5rem
    &.horizontal
      padding 0 .5rem
  @media (min-width $breakpoint-md-min) and (max-width $breakpoint-md-max)
    padding 1.5rem 2rem
    margin auto
    &.horizontal
      padding 0 2rem
  @media (min-width $breakpoint-lg-min) and (max-width $breakpoint-lg-max)
    padding 2.5rem 3rem
    margin auto
    &.horizontal
      padding 0 3rem
  @media (min-width $breakpoint-xl-min)
    padding 3rem 4rem
    margin auto
    &.horizontal
      padding 0 4rem