//Colors used in Mobile Menu
$fontColor: $mobileBlack
$mainColor: white
$activeColor: $blue
$barColor: $blue
$hoverColor: $mobileBlack
$borderColor: $mobileBorderColor

.mobile-navigation
  position: fixed
  z-index: 1000
  height: 100%
  display: block 
  overflow: hidden
  width: 100%
  left: 0
  top: 0
  +transition(all 0.4s)
  +transition-timing-function(ease-in-out)
  +translate3d(-100%, 0, 0)

  .bar
    height: 40px
    background-color: $barColor
    pointer-events: all
    position: relative
    z-index: 4
    +translate3d(0,0,0)
    +transition(all 0.3s)
    +transition-delay(0.4s)
    .toggle-menu
      width: 40px
      height: 100%
      z-index: 3
      cursor: pointer
      position: absolute
      right: 0
      top: 0
      +flex(center, center)
      .icon
        position: relative
        top: 2px
        span
          position: relative
          width: 15px
          height: 3px
          margin-bottom: 3px
          background-color: white
          border-radius: 9999px
          display: block
          opacity: 0
          &:first-of-type
            +transform(rotate(45deg))
            opacity: 1
            top: 6px
          &:last-of-type
            width: 15px
            opacity: 1
            bottom: 6px
            +transform(rotate(-45deg))
      &:hover
        .icon
          span:last-of-type
            width: 25px
    .logo
      height: 100%
      width: 100%
      position: absolute
      left: 0
      top: 0
      +flex(center, center)
      text-align: center
      color: white
      +bold
      font-size: 18px
      line-height: 18px
      margin: 0
      &:before
        content: ''
        display: inline-block
        +icon-sprite-mobile(-145px -70px, 40px, 25px)
        margin-right: 10px
        margin-left: -20px

  .menu
    height: 100%
    width: 100%
    left: 0
    top: 0
    background-color: $mainColor
    min-width: 275px
    position: absolute
    overflow-x: auto
    pointer-events: all
    z-index: 5

    >p
      margin-left: 20px
      margin-right: 20px
      +regular
      font-size: 15px !important
      line-height: 32px !important
      color: $fontColor
      strong
        +semibold
        font-size: 15px !important
        line-height: 32px !important
        color: $fontColor


  nav
    ul
      padding: 0
      list-style: none
      li
        a
          +semibold()
          font-size: 15px
          line-height: 18px
          color: $fontColor
          height: 50px
          +flex(flex-start, center)
          position: relative
          padding: 0 16px
          text-decoration: none
          +transition(all 0.2s)
          border-bottom: 1px solid $borderColor
          &:after
            content: '›'
            +semibold
            color: $light-grey
            font-size: 28px
            line-height: 28px
            position: absolute
            right: 15px
            top: 0px
            height: 100%
            +flex(center,center)

        &.active
          a
            color: $activeColor
            &:after
              color: $activeColor
        &.blue
          a
            color: $activeColor
            +bold
            &:after
              color: $activeColor
          &.my-tops
            a
              span
                margin-right: 15px
                width: 30px
                +flex(center, center)
                &:before
                  content: ''
                  display: block
                  +icon-sprite-mobile(-145px -100px, 24px, 24px)
          &.cart
            a
              span
                margin-right: 15px
                width: 30px
                +flex(center, center)
                &:before
                  content: ''
                  display: block
                  +icon-sprite-mobile(-170px -100px, 24px, 22px)

  .mobile-footer
    background-color: $blue
    .call-footer-bar
      +flex(flex-start, center)
      padding: 16px
      text-decoration: none

      .person
        border: 2px solid white
        border-radius: 9999px
        height: 100px
        width: 100px
        overflow: hidden
        background-image: url("/images/static/people/stefan_small_mobile.jpg")
        background-position: center
        background-size: cover
        margin-right: 15px
        img
          width: 100%

      .call
        color: white
        +bold
        font-size: 18px
        line-height: 22px

        span
          +regular
          font-size: 18px
          line-height: 22px
          color: $semiBlue
    .other-pages
      padding: 10px 16px 20px
      li
        margin-bottom: 4px
        a
          text-decoration: none
          +regular
          font-size: 15px
          line-height: 20px
          color: $semiBlue
        &:last-of-type
          margin-bottom: 0
  .social
    padding: 5px 16px 20px 
    div
      display: inline-block
      margin-right: 10px
      a
        +flex(center, center)
      &.facebook
        span
          +icon-sprite-mobile(-80px -110px, 24px, 24px)
          display: inline-block
      &.linkedin
        span
          +icon-sprite-mobile(-55px -110px, 24px, 24px)
          display: inline-block
  .contact-info
    padding: 5px 16px 30px
    p
      +regular
      color: $semiBlue
      font-size: 14px
      line-height: 20px
      strong
        color: white
        +semibold
      a
        text-decoration: none
        color: $semiBlue
  &.active
    +translate3d(0, 0, 0)