/*==========================================================================
  Header submenu
  ========================================================================== */

.sub-menu
  position: relative
  vertical-align: bottom
  min-width: 250px
  z-index: 2
  background: $bluePurple2
  background: linear-gradient(-45deg, $bluePurpleGradient23)
  border-radius: 0 10px 0 0
  padding: 45px 18px 55px

  .return-to-overview
    +flex(flex-start, center)
    padding-left: 25px
    margin-bottom: 60px
    color: white
    text-decoration: none
    opacity: 0.6
    line-height: 1
    transition: opacity 0.3s

    +respond-to-width(1050)
      font-size: 0.9rem

    span
      +flex(center, center)
      margin-right: 10px
      width: 22px
      height: 22px
      border-radius: 5px
      border: 1px solid white

      &:before
        content: ''
        display: inline-block
        +sprite(-33px -75px, 12px, 12px)

    &:hover
      opacity: 1



  ul
    list-style: none
    padding: 0
    margin: 0

    li
      border-bottom: 1px solid rgba(white, 0.25)

      a
        position: relative
        display: block
        text-decoration: none
        color: white
        opacity: 0.75
        padding: 12px 25px

        &:before
          content: ''
          position: absolute
          z-index: -1
          left: 0
          top: 0
          height: 100%
          width: 0
          opacity: 0
          background-color: $darkerPurple
          transition: all 0.3s


        &:after
          content: ''
          position: absolute
          right: 15px
          top: 26px
          +sprite(-33px -90px, 5px, 8px)

          +respond-to-width(1080)
            top: 23px

        &:hover
          &:before
            width: 100%
            opacity: 0.15

      &:first-of-type
        border-radius: 10px 10px 0 0

      &.active
        background-color: rgba(white, 0.07)

        a
          opacity: 1
          font-weight: bold()

          &:before
            display: none

  &.post-detail, &.travel-detail
    padding: 30px 30px 25px 20px
    //padding-bottom: 45px
    width: auto
    //padding-right: 30px

    .return-to-overview
      margin-bottom: 0
      padding-left: 10px

  +respond-to-width(750)
    width: 100%
    border-radius: 0
    display: none

    &.post-detail, &.travel-detail
      width: 100%

.mobile-submenu
  display: none
  +respond-to-width(750)
    display: block

    .travel-menu, .sub-menu
      display: block