//Colors used in Mobile Menu
$backgroundColor: white
$fontColor: white
$mainColor: $broosDarkPurple
$menuColor: $broosBlue
$activeColor: $broosYellow
$barColor: $blue
$hoverColor: $gray
$borderColor: rgba(255,255,255, .1)

.preventScroll
  overflow: hidden
  overflow-y: scroll
  position: fixed
  width: 100%


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

  .bar
    height: 60px
    background: $backgroundColor
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.11)
    pointer-events: all
    position: relative
    z-index: 10
    +translate3d(0,0,0)
    transition: all 0.3s
    transition-delay: 0.4s


    .toggle-menu
      width: 60px
      height: 100%
      z-index: 3
      border: $borderColor
      cursor: pointer
      position: relative
      +flex(center, center)
      .icon
        span
          position: relative
          width: 25px
          height: 3px
          margin-bottom: 3px
          background-color: $menuColor
          border-radius: 9999px
          display: block
          transition: all 0.3s
          &:last-of-type
            margin-bottom: 0
            width: 17px
            bottom: 0
          &:first-of-type
            top: 0 
      &:hover
        .icon
          span:last-of-type
            width: 25px
    .logo
      height: 100%
      width: 100%
      position: absolute
      left: 0
      top: 0
      +flex(center, center)
      a
        position: relative
        width: calc(100% - 140px)
        height: 50%
        display: inline-block
        background-position: center
        background-size: contain
        background-repeat: no-repeat
        background-image: url("/img/logo.svg")


    //.contact-button
    //  position: absolute
    //  right: 0
    //  top: 0
    //  height: 100%
    //  width: 60px
    //  z-index: 5
    //  a
    //    +flex(center, center)
    //    height: 100%
    //    &:before
    //      content: ''
    //      +sprite(-99px -397px, 23px, 25px)
    //      display: inline-block


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

  .menu
    height: calc(100% - 60px)
    width: 80%
    left: 0
    top: 60px
    background-color: $mainColor
    min-width: 275px
    position: absolute
    overflow-x: auto
    pointer-events: all
    z-index: 5
    +translate3d(-100%, 0, 0)

    +respond-to-width(500)
      width: 100%


  nav
    margin-top: 50px
    padding: 0 10px 80px 60px

    figure
      width: 85%
      max-width: 200px
      margin-bottom: 40px
      max-height: 55px

      img
        width: 100%


    h3
      font-size: 1.3rem
      color: white

    ul
      padding: 0
      list-style: none
      font-size: 1.3rem
      &.locations
        margin-bottom: 45px
      &.locations, &.business
        margin-top: 5px


      li
        margin-bottom: 4px
        a, span
          color: $fontColor
          position: relative
          display: inline-block
          text-decoration: none
          transition: color 0.2s
          cursor: pointer

        >ul
          padding-left: 20px
          font-size: 0.85em
          overflow: hidden
          opacity: 1
          transition: height 0.5s, opacity 0.2s
          &.hide
            height: 0 !important
            opacity: 0
          &.noTrans
            transition: height 0s
            opacity: 0

          li
            a
              color: $blue

              &:before
                content: '› '
            &.active
              a
                color: $activeColor !important

        &.active
          a, span
            color: $activeColor
          >ul
            li
              a
                color: $blue

  &.active
    .bar
      .toggle-menu
        border-left: 1px solid $borderColor
        .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
      +translate3d(0, 0, 0)

  &.shader-active
    .shader
      opacity: 0.4
      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
    header
      height: 60px
      visibility: hidden
      overflow: hidden
    .sticky-header, .sticky-header.show
      display: none
    .mobile-navigation
      display: block

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

      ul
        font-size: 1.2rem