//Colors used in Mobile Menu
$listColor: rgba(white, 0.5)
$listHoverColor: rgba(white, 0.75)
$listActiveColor: white

$barColor: $secondary-900
$barMenuColor: white
$menuBackground: $secondary-900

$shaderBackground: $secondary-900
$shaderOpacity: 0.6


.preventScroll
  +respond-to-width(750)
    overflow: hidden
    overflow-y: scroll
    position: fixed
    width: 100%


#mobile-navigation
  position: fixed
  z-index: 1000
  height: 100vh
  overflow: hidden
  width: 100%
  left: 0
  top: 0
  pointer-events: none

  .ie.v10 &
    height: 60px
    z-index: -1

  .bar
    display: none
    height: 60px
    background-color: $barColor
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.11)
    pointer-events: all
    position: relative
    z-index: 4
    transform: translate3d(0,0,0)
    transition: all 0.3s ease 0.4s, transform 0.4s ease 0s

    .toggle-menu
      width: 60px
      height: 100%
      z-index: 3
      cursor: pointer
      position: relative
      +flex(center, center)

      .icon
        width: 20px

        span + span
          margin-top: 4px

        span
          width: 100%
          height: 2px
          display: block
          transform: scale3d(1, 1, 1)
          transform-origin: 0 50%
          background-color: $barMenuColor
          transition: transform 0.6s

          &:nth-of-type(2)
            transform: scale3d(0.8, 1, 1)

          &:nth-of-type(3)
            transform: scale3d(0.45, 1, 1)

      &:hover
        .icon
          span
            transform: scale3d(1, 1, 1) !important

    .logo
      height: 100%
      width: 100%
      position: absolute
      left: 0
      top: 0
      +flex(center, center)

      a
        position: relative
        display: block
        width: 110px
        background-position: center
        background-size: contain
        background-repeat: no-repeat

        img
          width: 100%
          max-height: 36px

  &.hide-bar
    .bar
      transform: translate3d(0, -60px, 0)

  .shader
    width: 100%
    height: 100%
    position: absolute
    left: 0
    top: 0
    background-color: $shaderBackground
    opacity: 0
    transition-delay: 0.4s

  .menu
    position: absolute
    left: 0
    top: 0
    height: 100%
    width: 100%
    max-width: 600px
    min-width: 275px
    padding: 40px 120px 

    background-color: $menuBackground
    overflow-x: auto
    pointer-events: all
    z-index: 5
    transform: translate3d(-100%, 0, 0)

    nav
      position: relative

      .close
        position: absolute
        top: 17px
        left: -68px
        display: block
        width: 16px
        height: 16px
        cursor: pointer
        transform-origin: center
        transform: rotate(0deg)
        transition: transform 0.4s

        &:hover
          transform: rotate(90deg)
          opacity: 0.4

        &:before, &:after
          content: ''
          position: absolute
          display: block
          background-color: white
          transform-origin: center
          transform: rotate(45deg)
          transition: background-color 0.3s

        &:before
          left: 7px
          top: 0
          width: 2px
          height: 100%

        &:after
          left: 0
          top: 7px
          width: 100%
          height: 2px


      .logo-wrapper
        width: 100%
        max-width: 150px

        a
          display: block
          text-decoration: none

          img
            width: 100%
            max-height: 49px

      .menu-list
        margin-top: 40px

        ul
          margin: 0
          padding: 0
          list-style: none
          font-size: 1rem
          line-height: 1.2

          + ul
            margin-top: 24px

          li
            a
              display: block
              padding: 8px 0
              color: $listColor
              text-decoration: none
              transition: color 0.2s
              cursor: pointer

              &:hover
                color: $listHoverColor

            ul
              font-size: 0.85em

            &.active
              a
                color: $listActiveColor

  &.active
    .ie.v10 &
      height: 100vh
      z-index: 1000

    .bar
      .toggle-menu
        .icon
          span
            opacity: 0
            transition-delay: 0.4s
            &:first-of-type
              +transform(rotate(45deg))
              opacity: 1
              top: 6px
            &:last-of-type
              width: 25px
              opacity: 1
              bottom: 6px
              +transform(rotate(-45deg))
    .menu
      transform: translate3d(0, 0, 0)

  &.shader-active
    .shader
      opacity: $shaderOpacity
      pointer-events: all

  &.allow-animation
    .shader
      transition: all 0.2s
    .menu
      transition: all 0.3s
      transition-timing-function: ease-in-out

  +respond-to-width(750)
    display: block

    .bar
      display: block

    .menu
      max-width: none

  +respond-to-width(400)
    nav
      padding-left: 30px

      ul
        font-size: 1.2rem