/*==========================================================================
  Navigation
  ========================================================================== */

//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%


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

  .bar
    position: relative
    z-index: 6
    width: 80px
    height: 100vh
    pointer-events: all
    background-color: $bluePurple3
    background: linear-gradient(180deg, $bluePurpleGradient23)

    &:after
      content: ''
      position: absolute
      z-index: -1
      top: 0
      left: 0
      width: 100%
      height: 100%
      opacity: 0
      transition: opacity 0.4s
      background-color: $brightBlue

    +respond-to-width(1300)
      width: 60px


    .toggle-menu
      +flex(center, center)
      position: relative
      z-index: 3
      width: 100%
      height: 80px
      background-color: rgba(white, 0)
      cursor: pointer
      transition: background 0.3s

      +respond-to-width(1300)
        height: 60px

      .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

    .show-menu-placeholder
      cursor: pointer
      height: 115px
      text-align: center
      margin-top: -15px
      opacity: 1
      transition: opacity 0.3s

      p
        position: relative
        left: -2px
        margin: 15px 10px 0
        transform: rotate(-90deg)
        font-family: rubik()
        color: white


      .arrow
        +arrowWhite
        +movingUp
        animation-play-state: running
        +animation-iteration-count(4)
        +translate3dRotate(0, 0, 0, -90deg)
        transition: all 0.3s

      &:hover
        span
          +translate3dRotate(0, -5px, 0, -90deg)


    .logo
      display: none
      height: 100%
      width: 100%
      position: absolute
      left: 0
      top: 0
      //+flex(center, center)
      a
        position: absolute
        top: 0
        left: 60px
        height: 100%
        width: calc(100% - 180px)
        +flex(center, center)

        .icon
          height: 50px
          width: 30px
          background-position: center right
          background-size: contain
          background-repeat: no-repeat
          background-image: url("/img/logo-beeldmerk.svg")

          +respond-to-width(500)
            display: none

        .text
          margin-left: 20px
          height: 50px
          width: 185px
          background-position: center right
          background-size: contain
          background-repeat: no-repeat
          background-image: url("/img/logo-text.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

    .icons
      position: absolute
      bottom: 0
      left: 0
      width: 100%
      height: 160px

      a
        +flex(center, center)
        height: 80px
        width: 100%

        &:before
          content: ''
          display: inline-block
          transition: opacity 0.4s
          opacity: 1
          +animation-duration(1s)
          +animation-iteration-count(infinite)
          animation-play-state: paused

        &:hover
          &:before
            opacity: 0.60
            animation-play-state: running


        &.call
          &:before
            +sprite(0 0, 30px, 30px)
            +animation-name(phone-rings)


        &.mail
          position: relative

          .send
            position: absolute
            width: 15px
            left: 8px
            top: 35px

            span
              position: relative
              display: block
              height: 3px
              margin-bottom: 1px
              background-color: white
              opacity: 0
              width: 0
              transition: opacity 0.3s, width 0.2s

              &:nth-child(1)
                left: 50%
                transition-delay: 0.3s

              &:nth-child(2)
                left: 25%
                transition-delay: 0.2s

              &:nth-child(3)
                left: 0
                transition-delay: 0.1s

          &:before
            +sprite(0 -32px, 30px, 24px)
            +translate3d(0,0,0)
            transition: transform 0.3s
            transition-delay: 0.3s

          &:hover
            .send
              span
                opacity: 0.75
                &:nth-child(1)
                  width: 50%
                  transition-delay: 0.1s

                &:nth-child(2)
                  width: 75%
                  transition-delay: 0.2s

                &:nth-child(3)
                  width: 100%
                  transition-delay: 0.3s

            &:before
              +translate3d(6px, 0, 0)
              transition-delay: 0s

      +respond-to-width(1300)
        height: 120px
        a
          height: 60px

          &.call
            &:before
              +sprite(0 -141px, 20px, 20px)

          &.mail

            .send
              top: 27px
              span
                height: 2px

            &:before
              +sprite(0 -163px, 20px, 16px)

      +respond-to-width(450)
        width: 100px !important
        a
          width: 50px !important

          &.mail
            .send
              width: 13px
              left: 4px

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

  .menu
    position: absolute
    top: 0
    left: 80px
    height: 100vh
    width: 85%
    opacity: 0

    background-color: $bluePurple2
    background: linear-gradient(135deg, $menuGradient)

    min-width: 300px
    max-width: 840px
    overflow-x: auto
    pointer-events: all
    z-index: 5
    +translate3d(-100%, 0, 0)

    +respond-to-width(1300)
      left: 60px

    .placeholder
      width: column(8, 12)
      margin-left: column(2, 12)
      padding-top: 80px

      +respond-to-height(850)
        padding-top: 4vh

      +respond-to-width(750)
        padding-top: 20px
        >.home
          display: none

      +respond-to-width(450)
        width: column(10, 12)
        margin-left: 30px
        padding-top: 0
        .menu-header
          margin-top: 30px !important


      >.home
        font-size: 0.9rem
        color: white
        text-decoration: none
        opacity: 0.6
        transition: opacity 0.3s

        &:hover
          opacity: 0.8

      .menu-header
        margin-top: 5vh
        +flex(space-between, flex-start)

        .title
          font-size: 1rem

          h3
            margin: 0 0 10px
            font-size: 1.75em
            line-height: 1
            color: white
            font-family: rubik()
            font-weight: medium()

          p
            margin: 0
            color: white
            font-size: 1.4em
            opacity: 0.6

          +respond-to-height(850)
            font-size: 0.8rem

        .link
          position: relative
          display: inline-block
          min-width: 200px
          padding: 8px 55px 8px 20px
          border-radius: 10px
          border: 1px solid rgba(white, 0.4)
          font-family: rubik()
          font-weight: medium()
          font-size: 0.8rem
          transition: background 0.3s
          text-decoration: none
          color: white

          &:after
            content: ''
            display: inline-block
            position: absolute
            right: 20px
            bottom: 15px
            +arrowWhite
            +translate3d(0,0,0)
            transition: transform 0.3s

          &:hover
            &:after
              +translate3d(5px, 0, 0)


        +respond-to-width(750)
          display: block
          .link
            margin-top: 20px

    .close-button
      position: absolute
      right: 30px
      bottom: 25px
      border: 1px solid rgba(white, 0.4)
      height: 45px
      width: 45px
      +flex(center, center)
      cursor: pointer
      border-radius: 10px
      transition: border 0.3s

      .arrow
        margin-bottom: -2px
        display: inline-block
        +translate3dRotate(0,0,0,-180deg)
        +arrowWhite
        transition: transform 0.3s

      &:hover
        border-color: white
        .arrow
          +translate3dRotate(-5px, 0,0, -180deg)
  nav
    margin-top: 10vh

    +respond-to-width(450)
      margin-top: 50px


    ul
      padding: 0
      list-style: none
      font-size: 1.4rem
      line-height: 1

      +respond-to-height(850)
        font-size: 1.2rem

      +respond-to-height(650)
        font-size: 1rem
        padding-bottom: 10px


      li
        margin-bottom: 2vh
        opacity: 0.6
        transition: opacity 0.3s

        &:hover
          opacity: 0.8

        &.active
          opacity: 1

          &:before
            content: ''
            position: relative
            top: -2px
            display: inline-block
            margin-left: -20px
            +sprite(-33px -110px, 12px, 12px)

        a, span
          color: white
          position: relative
          display: inline-block
          text-decoration: none
          transition: color 0.2s
          cursor: pointer

        .dropdown-button
          display: none

        >ul
          margin-top: 20px
          padding-left: 20px
          font-size: 0.85em
          overflow: hidden
          opacity: 1
          transition: height 0.5s, opacity 0.2s
          display: none

          &.hide
            pointer-events: none
            height: 0 !important
            opacity: 0
            margin-top: 0
            padding-bottom: 0
          &.noTrans
            transition: height 0s
            opacity: 0

        &.active
          a, span
            color: $activeColor

  &.active
    z-index: 200
    .bar
      &:after
        opacity: 1

      .toggle-menu
        background-color: rgba(white, 0.2)
        .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))

      .show-menu-placeholder
        opacity: 0


    .menu
      opacity: 1
      +translate3d(0, 0, 0)

  &.shader-active
    .shader
      opacity: 0.8
      pointer-events: all

  &.allow-animation
    .shader
      transition: all 0.2s
    .menu
      transition: all 0.3s
      transition-timing-function: ease-in-out

  +respond-to-width(750)
    .bar
      width: 100%
      height: 60px
      background: linear-gradient(90deg, $bluePurpleGradient23)

      .toggle-menu
        width: 60px

      .show-menu-placeholder
        display: none

      .logo
        display: block

      .icons
        height: 60px
        width: 120px
        left: auto
        right: 0
        +flex(space-between, center)

        a
          width: 60px
          border-left: 1px solid rgba(white, 0.2)

    .menu
      left: 0
      top: 60px
      height: calc(100vh - 60px)

    nav
      ul
        li
          &.hasChildren
            >a
              display: none
            .dropdown-button
              display: inline-block

            >ul
              display: block