.app-menu
  min-width: 320px
  position: relative

  &:before
    content: ""
    display: block
    width: 10px
    height: 10px
    transform: rotate(45deg)
    position: absolute
    left: 33px
    top: -4px

  &, &:before
    background: #fff
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .2)
    border: 1px solid rgba(0, 0, 0, .1)

  & > ul > li > a,
  & > ul > li > span
    display: block
    padding: 8px 32px
    margin: 0

  & > p
    padding: 10px 32px
    margin: 0

  .avatar-badge
    background: #f6f6f6
    border-top: 1px solid #e8e8e8
    display: flex
    align-items: center

    .name
      display: block

      &:first-letter
        color: #ff004c

      & > span
        display: none

      & > strong
        font-weight: normal

    .avatar
      display: block
      width: 32px
      height: 32px
      border-radius: 50%
      background-repeat: no-repeat
      background-position: 50% 50%
      background-size: 32px
      margin: 0 12px 0 0
      overflow: hidden

  ul
    display: block
    list-style: none
    background: #fff
    border-top: 1px solid #e8e8e8
    padding: 5px 0
    margin: 0
    position: relative

    &:first-child
      border-top: none

  li
    display: block
    padding: 0
    margin: 0

    & > a
      display: block

    a

      &, &:visited, &:active, &:focus
        color: #000
        outline: none

      &:hover
        text-decoration: none
        color: #000
        background: #ffeba0

    &.disabled

      a

        &, &:visited, &:active, &:focus
          color: #bbb

        &:hover
          background: transparent

  hr
    display: none
