.userMenu
  height: 100%
  margin-right: column(0.8,12)
  background-color: #3A414C
  font-size: 15px
  line-height: 50px
  padding: 0 20px
  overflow: visible
  cursor: pointer
  flex-shrink: 0
  &:hover
    background-color: lighten(#3A414C, 10%)

  +respond-to-width(1280)
    margin-right: 0
    padding: 0 15px

    .bar
      padding-right: 15px
      &:after
        right: 15px

  .bar
    padding-right: 20px

    +respond-to-width(450)
      padding-right: 0

    &:after
      position: absolute
      top: 4px
      right: 20px
      width: 5px
      height: 9px
      transform: rotate(90deg)

      padding-top: 2.5em
      content: ""
      background-position: 0 center
      background-repeat: no-repeat
      background-image: url("/img/svg/arrow/arrow_white.svg")
      transition: background-position 0.2s

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

    > svg
      display: inline-block
      width: 18px
      height: 18px
      position: relative
      margin-right: 15px
      top: 3px

      path
        fill: $euroYellow

    +respond-to-width(1280)
      > span
        display: none
      > svg
        margin-right: 0

  .dropdown
    display: none
    z-index: 10
    position: absolute
    right: 0
    width: 230px
    background-color: white
    color: #323232
    font-size: 15px
    line-height: 1.2
    font-weight: bold
    box-shadow: 0px 0px 15px 0px rgba(#000, 0.15)

    a
      font-size: 15px
      line-height: 1.2
      text-decoration: none
      padding: 20px
      display: block
      width: 100%
      border-bottom: solid 1px $euroLighterGrey
      color: $euroHeaderGrey

      &:hover
        background-color: darken(white, 5%)
        cursor: pointer

    svg
      display: inline-block
      width: 18px
      height: 18px
      margin-right: 10px
      top: 3px
      position: relative

      path
        fill: $blue

    &.login
      form
        padding: 10px
        display: block
        width: 100%

        .alert
          color: #F95D5D
          margin-bottom: 15px
          font-weight: normal
          font-size: 14px
          line-height: 20px

        input
          width: 100%
          display: block
          border: none
          height: 40px
          background-color: $euroLighterGrey
          margin-bottom: 15px
          padding-left: 10px

          &:focus
            border-left: solid 5px $euroYellow

        input[type="submit"]
          padding: 10px 20px
          background-color: $euroYellow
          border-radius: 5px
          text-decoration: none
          color: $euroBlack
          position: relative
          transition: color 0.3s, background-color 0.3s
          margin-bottom: 0
          &:focus
            outline: 0
          &:hover
            background-color: lighten($euroYellow, 10%)
            color: lighten($euroBlack, 10%)
            cursor: pointer

          &:after
            position: absolute
            top: 0
            right: 20px
            width: 5px
            height: 9px

            padding-top: 2.5em
            content: ""
            background-position: 0 center
            background-repeat: no-repeat
            background-image: url("/img/svg/arrow/arrow_dark.svg")
            transition: background-position 0.2s


      a.forgot_pass
        padding: 0
        margin-bottom: 10px
        border: none
        width: 100%
        text-align: center
        text-decoration: underline
        text-transform: uppercase
        color: $euroLightGrey
        font-size: 10px
        font-weight: bold
        &:hover
          background-color: transparent
          color: darken($euroLightGrey, 10%)

      p
        background-color: $euroLighterGrey
        color: $euroTextGrey
        font-size: 12px
        margin: 0
        padding: 10px
        text-align: center

        a
          font-weight: bold
          font-size: 12px
          display: inline
          padding: 0
          color: $euroHeaderGrey
          text-decoration: underline
          &:hover
            background-color: transparent
            color: lighten($euroHeaderGrey, 10%)

    &.logout
      form
        padding: 20px
        display: block
        width: 100%
        cursor: pointer

        &:hover
          background-color: darken(white, 5%)
          cursor: pointer

        input[type="submit"]
          border: none
          font-size: 15px
          line-height: 1.2
          font-weight: bold
          padding: 0
          margin: 0
          background-color: transparent
          color: $euroHeaderGrey
          &:focus
            outline: 0

        span
          display: inline-block
          width: 18px
          height: 18px
          margin-right: 10px
          top: 3px
          position: relative
          border: solid 1px black

  &.open
    &:after
      transform: rotate(-90deg)

    .dropdown
      display: block