/*==========================================================================
  Sticky Nav
  ========================================================================== */

.sticky-nav
  position: fixed
  z-index: 99
  top: 0
  left: 0
  width: 100%
  height: 68px
  +flex(space-between, center)
  background-color: $blue
  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.11)
  +translate3d(0,0,0)
  transition: transform 0.8s

  +respond-to-width(950)
    &.scroll-down
      +translate3d(0, -68px, 0)
      box-shadow: 0px 2px 10px 0px rgba(0,0,0,0)

  +respond-to-width-beyond(951)
    &.hidden
      +translate3d(0, -68px, 0)
      box-shadow: 0px 2px 10px 0px rgba(0,0,0,0)

  .toggle-menu
    display: none
    width: 60px
    margin-right: 60px
    height: 100%
    z-index: 3
    border: $lightBlue
    cursor: pointer
    position: relative
    .icon
      span
        position: relative
        width: 25px
        height: 3px
        margin-bottom: 3px
        background-color: $lightBlue
        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: 120px
    padding-left: 20px
    +flex(flex-start, center)
    a
      +sprite(0 0, 30px, 35px)
      display: block


  nav
    width: calc(100% - 240px)

    ul
      +flex(center, center)
      margin: 0
      padding: 0
      list-style: none

      li
        font-size: 0.9rem

        +respond-to-width(1250)
          font-size: 0.75rem
          line-height: 1.25
          text-align: center

        a
          position: relative
          display: inline-block
          padding: 20px 25px
          text-decoration: none
          color: $lightGray

        &.active
          a
            color: white
            +metropolisSemiBold

  .languages
    position: relative
    width: 120px
    height: 68px
    +flex(flex-end, center)
    padding: 0 25px 0 0
    cursor: pointer

    .close

      &:after
        display: block
        content: ''
        +arrowBrownDown
        transform: rotate(0deg)
        transition: all 0.4s

    ul
      position: absolute
      top: 7px
      right: 45px
      width: 50px
      height: 45px
      padding: 8px 0
      margin: 0
      border-radius: 45px
      list-style: none
      +flex(center, flex-start)
      +flex-rows
      overflow: hidden
      pointer-events: none
      background-color: transparent
      transition: background 0.3s

      li
        text-align: center
        +order(5)
        margin-bottom: 10px

        //@for $i from 0 through 8
        //  &:nth-child(#{$i})
        //    top: 42px * ($i - 1)


        a
          text-decoration: none

          span
            +flex(center, center)
            width: 37px
            height: 37px
            border: 2px solid rgba($brown, 0.3)
            border-radius: 100%
            transition: border 0.2s
            &:before
              content: ''
              display: inline-block

          p
            margin: 5px 0 0
            +phenomena
            font-size: 0.8rem
            color: $lightGray
            opacity: 0.6

        &:hover
          a
            span
              border-color: rgba($brown, 0.5)

            p
              opacity: 0.8

        &.active
          +order(1)

          pointer-events: none

          a
            span
              border-color: $brown
              &:before
                opacity: 1

            p
              opacity: 1

        &.nl
          +order(2)
          margin-left: 0
          a
            span
              &:before
                +sprite(-30px 0, 25px, 25px)

        &.de
          a
            span
              &:before
                +sprite(-56px 0, 25px, 25px)

    &.show
      .close
        &:after
          transform: rotate(180deg)
      ul
        pointer-events: all
        height: 102px
        background-color: $darkBlue

  +respond-to-width(950)
    nav
      display: none

    .toggle-menu
      +flex(center, center)

    .logo
      width: 120px
      +flex(center, center)
      padding-left: 0

  +respond-to-width(550)
    .toggle-menu
      margin-right: 0

    .languages
      padding-right: 0
      width: 60px

      ul
        right: 8px

      .close
        display: none