.off-canvas

  &__toggle
    absolute($paddingSmall, $paddingSmall)
    display block
    z-index 3
    padding $paddingSmall
    padding-top ($paddingSmall - 2px)
    width 20px
    height 20px
    font-size 26px
    font-weight 300
    line-height 20px
    box-sizing content-box
    vertical-align middle
    transition all $timingFast ease-in-out 0s
    color $colorTextInvert
    cursor pointer
    text-align center

    &:after
      content '×'

    &&--open
      right -20px
      height 23px
      font-size 20px
      font-weight normal
      background-color $colorPrimary
      box-shadow $shadowDropDefault
      border-top-right-radius $borderRadiusDefault
      border-bottom-right-radius $borderRadiusDefault
      z-index -1
      transition all $timingFast ease-in-out $timingNormal

      &:after
        content '»'

      &:hover
      &:focus
        right (-20px - (2 * $paddingSmall))

  &__head
    flex-basis 80px
    background-color $colorPrimary
    color $colorTextInvert
    display flex
    flex-direction row
    align-items center
    justify-content center
    text-align center
    position relative

    h2
      padding $paddingLayout
      font-size 20px
      font-weight 300

    svg
      absolute(50%,null,null,50%)
      width 100%
      opacity .85
      transform translate(-50%,-50%) rotateY(180deg)

  &__body
    flex 2 2
    overflow-y auto

  &__footer
    flex 0 2
    padding $paddingNormal
    font-size 11.2px

.nav
  font-size 15px

  &__list
    margin-bottom $paddingNormal

  &__link
    display block
    padding $paddingNormal $paddingXLarge $paddingNormal $paddingLarge
    color inherit
    cursor pointer
    position relative
    line-height 20px
    background-color transparent
    transition background-color $timingNormal ease-in-out
    white-space nowrap
    text-overflow ellipsis
    overflow hidden
    max-width 240px

    &&--level0
      font-weight bold

    &&--level1
        font-size 15px
        padding-left $paddingLarge*2

    &&--level2
      font-size 14px
      padding-left $paddingLarge*3
      padding-right $paddingNormal
      white-space initial
      overflow initial

    &&--current
      color $hexMaroonFlush

    &&--filtered
      font-weight normal
      padding-top $paddingSmall
      padding-bottom @padding-top

    &:hover
    &:focus
      background $hexAlto

    &-icon
      width 18px
      height @width
      position absolute
      right $paddingNormal
      top s('calc(50% - %s)', @height/2)
      transform rotate(-180deg)
      transition transform $timingNormal ease-in-out

      .nav__link.nav__link--active &
        transform rotate(0)