/* Colors used in Mobile Menu */
$listColor: $neutral-100
$listHoverColor: rgba($neutral-100, 0.5)
$listActiveColor: white

$barMenuColor: white

$shaderBackground: white
$shaderOpacity: 0.8

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

#navigation
  position: fixed
  z-index: -1
  left: 0
  top: 0
  overflow: hidden
  display: none
  height: 100vh
  width: 100%
  pointer-events: none
  opacity: 0
  transition: opacity 0.5s ease-in-out, z-index 0s ease 0.5s

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

  .menu
    position: absolute
    right: 0
    top: 0
    height: 100%
    width: 100%
    overflow-x: hidden
    pointer-events: all
    z-index: 5

    .grid-row
      position: relative
      z-index: 2
      pointer-events: none

      .background
        position: absolute
        left: 25%
        top: 0
        min-height: 100vh
        height: 100%
        width: 100vw
        transform: translate3d(25%, 0, 0)

        .anvil &
          background-color: $anvil-primary-700

        .rols-machineonderdelen &
          background-color: $rols-primary-700

        .job-precision &
          background-color: $job-primary-700

        .jansen-machining-technology &
          background-color: $jansen-primary-700

        .machinefabriek-de-valk &
          background-color: $valk-primary-700

    nav
      position: relative
      width: 75%
      min-height: 100vh
      margin-left: 25%
      +flex(flex-start, center)
      padding: 80px 0
      pointer-events: all

      .menu-list
        width: 75%
        margin-left: column(2, 9)

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

          +respond-to-height(950)
            font-size: 1.5rem

          +respond-to-width(475)
            font-size: 1.2rem

          & + ul
            margin-top: 24px

          li
            border-bottom: 2px solid $listColor

            a
              position: relative
              +flex(flex-start, center)
              padding: 4vh 0 2.5vh
              cursor: pointer
              text-decoration: none

              p
                margin: 0
                color: $listColor
                transition: color 0.2s

              .icon
                +flex(center, center)
                margin-right: 20px
                width: 30px
                height: 30px
                opacity: 1
                transition: opacity 0.3s

                &:before
                  transition-duration: .3s
                  content: ''

            &.home
              a .icon:before
                +sprite(200px 198px, 25px, 28px)

            &.group, &.about
              a .icon:before
                +sprite(412px 81px, 26px, 25px)

            &.specialisms
              a .icon:before
                +sprite(355px 71px, 27px, 22px)

            &.segments
              a .icon:before
                +sprite(385px 81px, 25px, 25px)

            &.esg_vision
              a .icon:before
                +sprite(355px 71px, 27px, 22px)

            &.machine_park
              a .icon:before
                +sprite(252px 229px, 25px, 25px)

            &.vacancies
              a .icon:before
                +sprite(310px 228px, 25px, 25px)

            &.contact
              a .icon:before
                +sprite(442px 129px, 23px, 29px)

            &:hover
              a .icon:before
                transform: scale(1.1)

            ul
              font-size: 0.85em

            &.active
              border-color: $listActiveColor
              a
                p
                  color: $listActiveColor

  &.active
    z-index: 900
    opacity: 1
    transition: opacity 0.5s ease-in-out, z-index 0s

    .menu
      .background
        transform: translate3d(0, 0, 0)

  &.allow-animation
    display: block

    .shader
      transition: all 0.2s

    .menu
      transition: all 0.3s
      transition-timing-function: ease-in-out

      .background
        transition: transform 0.3s ease-in-out

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

    .menu
      .grid-row
        width: 100%
        margin: 0
        max-width: none

        .background
          left: 0

      nav
        width: calc(100% - 80px)
        margin: 0 auto

        .menu-list
          width: 100%
          margin-left: 0