//Colors used in Mobile Menu
$listColor: $black
$listHoverColor: rgba($black, 0.7)
$listActiveColor: $blue

$barColor: $blue
$barMenuColor: white
$menuBackground: white

$shaderBackground: $blue
$shaderOpacity: 0.6


.preventScroll
  +respond-to-width(840)
    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

  .bar
    display: none
    height: 60px
    background-color: $douvDarkBlue
    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
    transition-delay: 0.4s

    .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: 150px
        max-height: 35px
        background-position: center
        background-size: contain
        background-repeat: no-repeat

        img
          width: 100%
          max-height: 35px

    .cart
      height: 100%
      width: auto
      position: absolute
      right: 20px
      top: 0
      +flex(center, center)

      a
        position: relative
        display: block
        max-height: 35px
        background-position: center
        background-size: contain
        background-repeat: no-repeat

        .phone
          display: inline-block
          width: 15px
          height: 15px
          margin-right: 5px
          position: relative
          top: 2px

        span.shoppingCartButtonCounter
          position: absolute
          right: -10px
          top: -8px
          font-weight: bold
          width: 1.3em
          font-size: 1em
          line-height: 1.3em
          color: white
          transition: width 0.3s, height 0.3s

        img
          width: 100%
          max-height: 35px

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

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

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

    nav
      position: relative
      background-color: transparent

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

        &:hover
          transform: rotate(90deg)
          &:before, &:after
            background-color: $douvYellow

        &:before, &:after
          content: ''
          position: absolute
          display: block
          background-color: $douvLightBlue
          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: 250px

        a
          +flex(space-between, flex-start)
          text-decoration: none

          img
            max-height: 45px

      .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: $douvLightBlue
              text-decoration: none
              transition: color 0.2s
              cursor: pointer

              &:hover
                color: $douvBlue

            ul
              font-size: 0.85em
              margin-left: 20px

            &.active
              > a
                color: $douvDarkYellow

  &.active
    .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(840)
    display: block

    .bar
      display: block

    .menu
      max-width: none

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

      ul
        font-size: 1.2rem