//Colors used in Mobile Menu
$fontColor: white
$mainColor: $darkGray
$activeColor: $turquoise
$barColor: $darkGray
$hoverColor: $gray
$borderColor: rgba(255,255,255, .1)

.mobile-sticky
  height: 60px
  display: none
  pointer-events: all
  position: absolute
  top: 5vh
  z-index: 6
  width: 80%
  max-width: 400px
  +translate3d(0,0,0)
  transition: all 0.3s
  transition-delay: 0.4s
  .toggle-menu
    width: 60px
    height: 100%
    z-index: 3
    left: -30px
    background-color: $grayButton
    border: none
    cursor: pointer
    position: relative
    border-radius: 9999px
    transition: all 0.3s
    +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: 20px
    &:hover
      left: -30px
      .icon
        span:last-of-type
          width: 25px
  .logo
    height: 100%
    width: 100%
    position: absolute
    left: 0
    top: 0
    +flex(center, center)
    span
      display: block
      width: 80%
      height: 37%
      opacity: 0
      transition: all 0.3s
      img
        max-height: 100%
    &.home
      span
        opacity: 0
      &.show
        span
          opacity: 1

.mobile-navigation
  position: fixed
  z-index: 1000
  height: 100%
  display: block
  overflow: hidden
  width: 0%
  left: 0
  top: 0
  pointer-events: none
  min-width: 345px
  transition: width 0.4s

  .bar
    @extend .mobile-sticky
    position: relative
    display: block

  .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: 275px
    max-width: 400px
    position: absolute
    overflow-x: auto
    pointer-events: all
    z-index: 3
    transition: all 0.4s
    transition-timing-function: ease-in-out
    padding-top: 50px
    +translate3d(-100%, 0, 0)

    .close-menu
      display: none
      width: 60px
      height: 60px
      z-index: 3
      background-color: $grayButton
      cursor: pointer
      position: absolute
      right: 0
      top: 0
      .icon
        span
          position: relative
          width: 25px
          height: 3px
          margin-bottom: 3px
          background-color: $fontColor
          border-radius: 9999px
          display: block
          transition: all 0.3s
          &:first-of-type
            +transform(rotate(45deg))
            top: 6px
          &:nth-child(2)
            opacity: 0
          &:last-of-type
            margin-bottom: 0
            width: 25px
            bottom: 6px
            +transform(rotate(-45deg))

    >p
      margin-left: 20px
      margin-right: 20px
      +font-light(15px, 32px)
      color: $fontColor
      strong
        +font-default(15px, 32px)
        color: $fontColor
    .menu-logo
      +sprite(-125px -65px, 154px, 31px)
      margin: 40px auto
      display: none
  .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-header(14px, 38px)
          color: $fontColor
          opacity: 0.4
          position: relative

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

  nav
    padding: 0 20%
    ul
      padding: 0
      list-style: none
      li
        a
          +font-light(23px, 42px)
          color: $fontColor
          position: relative
          display: block
          transition: all 0.2s
          span
            +font-light(23px, 42px)
            color: $fontColor
            display: inline-block
            padding: 15px 0
            transition: all 0.2s
          &:after
            content: ''
            position: absolute
            left: 0
            bottom: 0
            height: 1px
            width: 115px
            opacity: 0.3
            background-color: white
          &:hover
            color: $hoverColor
            span
              color: $hoverColor
        &.divide
          border-bottom: 1px solid $borderColor
          padding-top: 20px
          margin-bottom: 20px
        .categories
          padding: 30px 0 30px 14%
          li
            a
              +font-default(16px, 18px)
              letter-spacing: 3.2px
              text-transform: uppercase
              color: white
              padding: 20px 0
              +flex(flex-start, center)
              transition: all 0.2s
              p
                +font-default(16px, 18px)
                letter-spacing: 3.2px
                text-transform: uppercase
                color: white
                margin: 0
                display: inline-block
              span
                text-align: center
                margin-right: 25px
                display: inline-block
                width: 30px
                +font-light(23px, 23px)
                padding: 0

                &:before
                  content: ''
                  display: inline-block
              &:hover
                color: $hoverColor
              &:after
                display: none
            &.lifestyle
              a span:before
                +sprite(-123px -129px, 23px, 20px)
            &.fashion
              a span:before
                +sprite(-147px -130px, 21px, 22px)
            &.beauty
              a span:before
                +sprite(-168px -130px, 28px, 17px)
        &.active
          a
            color: $activeColor
            span
              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-default(20px)
      color: $fontColor

    p
      +font-light(15px, 21px)
      color: $fontColor
      a
        +font-default(15px, 21px)
        color: $activeColor

  .social
    margin-top: 125px
    padding: 0 20%
    p
      display: block
      color: white
      +font-default(12px, 15px)
      letter-spacing: 2.4px
      text-transform: uppercase

    .icons
      margin-top: 15px
      display: block
    a
      margin-right: 10px
      display: inline-block
      span
        opacity: 0.65
        transition: all 0.25s
        display: inline-block
        &.twitter
          +sprite(0 -115px, 35px, 35px)
        &.linkedin
          +sprite(-36px -115px, 35px, 35px)
        &.facebook
          +sprite(-72px -115px, 35px, 35px)
        &:hover
          opacity: 1

  &.active
    width: 100%
    .bar
      +translate3d(100%,0,0)
      transition-delay: 0s
      .toggle-menu
        background-color: $grayButton
        left: -40px
        .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

+media-query-height(900px)
  .mobile-navigation
    .menu
      .menu-logo
        margin: 25px auto 5px
    nav
      ul
        li
          a
            span
              padding: 5px 0
              font-size: 20px
          .categories
            padding: 10px 0 10px 20px
            li
              a
                font-size: 14px
                line-height: 16px
                padding: 15px 0

+media-query-height(700px)
  .mobile-navigation
    .social
      margin-top: 50px

+media-query-height(650px)
  .mobile-navigation
    .social
      margin-top: 40px
      .icons
        margin-top: 10px
      a
        margin-right: 0
        span
          +transform(scale(0.85))

    .menu
      .menu-logo
        margin: 20px auto 5px
    nav
      ul
        li
          a
            span
              padding: 2px 0
              font-size: 18px
          .categories
            padding: 10px 0 10px 10px
            li
              a
                font-size: 14px
                line-height: 16px
                padding: 12px 0

+media-query-height-or-width(900px, 750px)
  .mobile-sticky
    top: 0
    max-width: none
    width: 100%
    background-color: $turquoise
    display: block
    .toggle-menu
      left: 0
      border-radius: 0
      &:hover
        left: 0
    .logo, .logo.home
      span
        opacity: 1

  .mobile-navigation
    .menu
      z-index: 7
      .close-menu
        +flex(center, center)

    .bar
      +translate3d(0, -60px, 0)
      &.show
        +translate3d(0, 0, 0)
        transition-delay: 0s
    &.active
      .bar
        +translate3d(0, -60px, 0)
        &.show
          +translate3d(0, 0, 0)