//Colors used in Mobile Menu
$fontColor: $fontBlack
$mainColor: $darkBlue
$activeColor: white
$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

  &.active
    .bar
      opacity: 1

  .bar
    height: 60px
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.11)
    pointer-events: all
    position: relative
    z-index: 4
    transition: opacity 0.4s
    transition-delay: 0.4s
    background: linear-gradient(-90deg, $lightOrange 0%, $darkOrange 100%)


    .toggle-menu
      width: 60px
      height: 100%
      z-index: 3
      border: $borderColor
      background-color: $fontGray
      cursor: pointer
      position: relative
      +flex(center, center)
      .icon
        span
          position: relative
          width: 25px
          height: 3px
          margin-bottom: 3px
          background-color: white
          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
      width: 150px
      max-width: 150px
      position: fixed
      left: 40%
      top: 15px

    .mobile-contact
      position: fixed
      z-index: 30
      opacity: 1
      background-color: transparent
      padding: 0
      margin: 0
      right: 0
      height: 60px
      width: auto

      .contact-info
        height: 60px
        padding: 0
        text-align: right

        .tel
          &:before
            content: ''
            display: inline-block
            background: url(/img/svg/sprites.svg) 100px -85px no-repeat
            margin: 0 6px 0 40px
            +translate3d(0,0,0)
            background-size: 800%
            width: 150px
            height: 90px

    .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: $mainColor
    opacity: 0
    transition-delay: 0.4s
    z-index: 2

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

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


  nav
    margin-top: 50px
    padding: 0 10px 80px 60px
    font-size: 1rem
    line-height: 1.6rem

    h3
      font-size: 1.3rem
      color: white

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


      li
        margin-bottom: 4px
        a, span
          color: white
          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: white

              &:before
                content: ""
                display: inline-block
                margin: 0 5px
                padding-top: 4px
                width: 14px
                height: 14px
                position: relative
                top: 5px
                background-position: -46px center
                background-size: 400%
                background-repeat: no-repeat
                background-image: url("/img/svg/button_arrow.svg")
            &.active
              a
                color: $lightOrange !important

        &.active
          a, span
            color: $lightOrange
          >ul
            li
              a
                color: white

  &.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(550)
    .bar
      .logo
        left: 37%

  +respond-to-width(435)
    .bar
      .logo
        left: 33%
    nav
      padding-left: 30px

      ul
        font-size: 1.2rem

  +respond-to-width(375)
    .bar
      .logo
        left: 31%

  +respond-to-width(321)
    .bar
      .logo
        left: 27%