//Colors used in Mobile Menu
$fontColor: $lightPurple
$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

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

    background-image: url("/img/forest_top_view.jpg")
    background-position: bottom right
    background-size: cover

    [class^="vso"] &
      background-image: url("/img/forest_top_view_green.jpg")

    [class^="services"] &, [class^="jobs"] &, .global &
      background-image: url("/img/forest_top_view_grey.jpg")


    .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: 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
      height: 100%
      width: 100%
      position: absolute
      left: 0
      top: 0
      +flex(center, center)
      a
        position: relative
        top: -3px

        width: calc(100% - 140px)
        height: 50%
        display: inline-block
        background-position: center
        background-size: contain
        background-repeat: no-repeat
        background-image: url("/img/mobile-so-logo.svg")

        [class^="vso"] &
          background-image: url("/img/mobile-vso-logo.svg")

        [class^="services"] &, [class^="jobs"] &, .global &
          background-image: url("/img/mobile-service-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: $mainColor
    opacity: 0
    transition-delay: 0.4s
    [class^="vso"] &
      background-color: $darkTurquoise

  .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)

    [class^="vso"] &
      background-color: $darkTurquoise

    [class^="services"] &,
    [class^="jobs"] &
      background-color: $globalBlue

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

    .office
      +flex(flex-start, center)
      padding-left: 60px
      height: 85px

      a
        color: $brightBlue
        font-weight: semi-bold()
        font-size: 0.9rem
        text-decoration: none
        [class^="vso"] &
          color: $brightTurquoise

        [class^="services"] &,
        [class^="jobs"] &
          color: $servicesLightBlue

      &:before
        content: ''
        position: relative
        top: 1px
        display: inline-block
        margin-right: 10px
        +sprite(-95px -155px, 17px, 17px)

        [class^="vso"] &
          +sprite(-131px -155px, 17px, 17px)
        [class^="services"] &,
        [class^="jobs"] &
          +sprite(-131px -155px, 17px, 17px)


  .root-links
    padding-left: 60px

    a
      text-decoration: none
      display: block

    .home-link

      font-weight: medium()
      color: white
      font-size: 1.4rem

      +respond-to-width(450)
        font-size: 1.3rem

      strong
        font-weight: medium()
        color: $blue

      [class^="vso"] &
        color: $lightTurquoise
        strong
          color: $turquoise

      [class^="services"] &,
      [class^="jobs"] &
        color: $servicesLightBlue
        strong
          color: $servicesLightBlue

    .root-link
      color: $blue
      font-size: 1rem
      line-height: 1.2
      opacity: 0.6
      margin-top: 10px

      &:before
        content: ''
        display: inline-block
        margin-right: 10px
        +arrowTurquoise
        +translate3dRotate(0,0,0, 180deg)

      [class^="vso"] &
        color: $turquoise
        opacity: 0.8

      [class^="services"] &,
      [class^="jobs"] &
        color: $servicesLightBlue
        opacity: 0.8
        &:before
          +arrowWhite
          opacity: 0.4

      +respond-to-width(450)
        position: relative
        font-size: 0.9rem
        &:before
          position: absolute
          left: -25px
          top: 3px
          margin-right: 0

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

    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
          [class^="vso"] &
            color: $brightTurquoise
          [class^="services"] &,
          [class^="jobs"] &
            color: $servicesLightBlue

        >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
              [class^="vso"] &
                color: $turquoise
              [class^="services"] &,
              [class^="jobs"] &
                color: $servicesLighterBlue

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

        &.active
          a, span
            color: $activeColor
          >ul
            li
              a
                color: $blue
                [class^="vso"] &
                  color: $turquoise
                [class^="services"] &,
                [class^="jobs"] &
                  color: $servicesLighterBlue

  &.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

    .root-links
      padding-left: 30px

      .root-link
        margin-left: 26px


    .menu
      .office
        padding-left: 30px