//Colors used in Mobile Menu
$fontColor: white
$mainColor: $darkBlue
$activeColor: lighten($highlightColor, 20%)
$barColor: $primaryColor
$hoverColor: darken($white, 15%)
$borderColor: rgba(255,255,255, .1)

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

  .bar
    height: 60px
    background-color: $barColor
    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
    .toggle-menu
      width: 80px
      height: 100%
      z-index: 3
      background-color: $mainColor
      border: $borderColor
      cursor: pointer
      position: relative
      +flex(center, center)
      .icon
        span
          position: relative
          width: 25px
          height: 3px
          margin-bottom: 3px
          background-color: $fontColor
          border-radius: 9999px
          display: block
          transition: all 0.3s
          &:last-of-type
            margin-bottom: 0
            width: 17px
      &:hover
        .icon
          span:last-of-type
            width: 25px
    .logo
      height: 100%
      width: 100%
      position: absolute
      left: 0
      top: 0
      +flex(center, center)
      span
        +sprite(-470px -55px, 129px, 20px)
        display: inline-block

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

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

  .menu
    height: 100%
    width: 80%
    left: 0
    top: 0
    background-color: $mainColor
    min-width: 300px
    position: absolute
    overflow-x: auto
    pointer-events: all
    z-index: 5
    transition: all 0.4s
    transition-timing-function: ease-in-out
    +translate3d(-100%, 0, 0)

    >p
      margin-left: 20px
      margin-right: 20px
      +font-light()
      font-size: 15px !important
      line-height: 32px !important
      color: $fontColor
      strong
        +font-bold()
        font-size: 15px !important
        line-height: 32px !important
        color: $fontColor

  .language
    padding: 0 20px
    ul
      list-style: none
      padding: 0 0 5px
      margin: 0
      height: 60px
      +flex(flex-end, center)
      border-bottom: 1px solid $borderColor
      li
        margin-right: 20px
        a
          text-transform: uppercase
          +font-light()
          font-size: 14px !important
          line-height: 38px !important
          color: $fontColor
          opacity: 0.4
          position: relative

        &.active
          a
            +font-light()
            color: $fontColor
            opacity: 1
            &:after
              content: ''
              width: 100%
              height: 1px
              background-color: $fontColor
              position: absolute
              left: 0
              bottom: -3px

  nav
    padding: 0 20px
    ul
      padding: 0
      list-style: none
      li
        a
          +font-default()
          font-size: 18px !important
          line-height: 42px !important
          color: $fontColor
        a
          position: relative
          display: block
          transition: all 0.2s

        &:hover
          a
            color: $hoverColor
        &.divide
          border-bottom: 1px solid $borderColor
          padding-top: 20px
          margin-bottom: 20px

        &.active
          a
            color: $activeColor

  .contact-information
    margin-top: 60px
    background-color: darken($mainColor, 5%)
    padding: 40px 20px
    position: relative
    &:before, &:after
      content: ''
      background-image: url('/img/horizontal-shadow.png')
      height: 40px
      width: 100%
      position: absolute
      left: 0
      top: 0
    &:after
      top: auto
      bottom: 0
      +transform(rotate(180deg))

    h3
      +font-bold()
      font-size: 20px !important
      color: $fontColor

    p
      +font-light()
      font-size: 15px !important
      line-height: 21px !important
      color: $fontColor
      a
        +font-bold()
        font-size: 15px !important
        line-height: 21px !important
        color: $activeColor

  .social
    margin-top: 40px
    strong
      display: block
      opacity: 0.7
      border-bottom: 1px solid $borderColor
    .icons
      margin-top: 15px
      display: block
    a
      margin-right: 5px
      span
        opacity: 0.6
        transition: all 0.25s
        &.facebook
          +facebookWhite
        &.twitter
          +twitterWhite
        &.linkedin
          +linkedinWhite
        &.instagram
          +instagramWhite
        &.youtube
          +youtubeWhite
        &.pinterest
          +pinterestWhite
        &:hover
          opacity: 1

  &.active
    .bar
      +translate3d(80%,0,0)
      transition-delay: 0s
      .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
      opacity: 0.4
      pointer-events: all

.mobile-logo
  height: 100%
  width: 100%
  position: absolute
  left: 0
  top: 0
  +flex(center, center)
  span
    background: url('/img/femmasse-mobile.svg') no-repeat
    width: 129px
    height: 20px
    display: inline-block


+media-query(900px)

  header
    height: 60px
    visibility: hidden
    overflow: hidden
  .sticky-header, .sticky-header.show
    display: none
  .mobile-navigation
    display: block