html
body
  height 100%
  width 100%
  overflow hidden

#app
  absolute 0 0 0 0
  overflow hidden

section:not(.active)
  transform translateX(-100%)
  opacity 0

section.active ~ section
  transform translateX(100%)
  opacity 0

section.active
  transform translateX(0)
  opacity 1
  transition transform 200ms ease-in-out, opacity 200ms ease-in-out 0s

section
  absolute 0 0 0 0
  overflow hidden
  transition transform 200ms ease-in-out, opacity 200s ease-in-out 100ms

  .toast
    z-layer 'modal'
    absolute none $toast-margin $toast-margin $toast-margin
    height $toast-height
    line-height $toast-height
    font-size $toast-font-size
    color $toast-foreground
    background $toast-background
    transition 0.7s ease-out
    opacity 1
    transform translateY(0)

    &.hidden
      transform translateY(100%)
      opacity 0

    .text
      absolute ($toast-font-size * $baseline-ratio) none none (($toast-height - $toast-font-size) / 2)

  header
    absolute 0 0 none 0
    height $header-height
    z-layer 'section', 'header'
    color $header-foreground
    background $header-background
    display flex

    h2
      font-size 1.0em
      font-weight 300
      margin 0
      color $header-foreground
      white-space nowrap
      flex 1
      min-width 0 // https://css-tricks.com/flexbox-truncated-text/
      height 100% // required for Safari webkit, otherwise vertical-center of decending label or div.select does not work

      label
        overflow hidden
        text-overflow ellipsis

      > label
      > div.select
        padding-right $select-padding
        vertical-center relative
        vertical-align top
        max-width 100%
        display inline-block

      &:first-child
        padding-left 15px

    nav
      &:first-child .icon:first-child
        padding-left $header-horizontal-nav-margin

      &:last-child .icon:last-child
        padding-right $header-horizontal-nav-margin

      .icon
        line-height $header-height
        width $header-icon-width
        text-align center
        font-size 1.4em
        display inline-block
        cursor pointer
        color $header-icon-foreground
        box-sizing content-box

        &.active
          color $header-icon-foreground-active

      .menu
        position relative
        display inline-block

        .entries
          absolute 85% 0
          background $menu-entries-background
          color $menu-entries-foreground
          border $menu-entries-border
          box-shadow $menu-entries-shadow
          z-layer 'modal'

          opacity 0
          transform-origin 50% 0%
          transform scale(0.75)
          visibility hidden
          transition opacity 150ms ease-out, transform 150ms ease-out, visibility 0 linear 150ms

          li
            padding $menu-entry-padding
            border-style $menu-entry-item-border-style
            border-width $menu-entry-item-border-width
            border-color $menu-entry-item-border-color
            white-space nowrap
            line-height 1em
            cursor pointer

            &.hidden
              display none

            &.no-link
              cursor default

            &:last-child
              border none

        &.view
          .icon
            background lighten($header-background, 5%)

          .entries
            visibility visible
            transition opacity 50ms ease-out, transform 50ms ease-out
            transition-delay 0
            opacity 1
            transform scale(1)

  article
    z-layer 'section', 'article'
    background $background
    absolute $header-height 0 0 0
    overflow-y none

  aside
    z-layer 'section', 'aside'
    absolute $header-height none 0 none
    color $aside-foreground
    background $aside-background
    width 100%
    overflow hidden
    opacity 0
    transition .2s ease-in-out

    @media $media-gt-phone
      width 40%
      max-width 450px

    &.right
      right 0
      transform translateX(100%)
      &.active
        transform translateX(0)
    &.left
      transform translateX(-100%)
      &.active
        transform translateX(0)

    &.active
      z-layer 'section', 'aside'
      opacity 1