@require 'components/button.styl'
@require 'settings/breakpoints.styl'

:root
  --genericRecipientBackground: var(--secondaryColor)
  --genericRecipientColor: var(--secondaryContrastTextColor)

.recipient
    display flex
    flex-direction row
    align-items center

    +small-screen()
        align-items flex-start

.recipients-list-light
    .recipient
        margin 1rem 0

    & + .recipient
        margin-top 1rem

.recipient-idents
    flex 1 1 auto
    overflow hidden
    text-overflow ellipsis

.recipient-user
.recipient-details
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
    line-height 1.3

.recipient-user
    font-size 1rem
    font-weight bold

.recipient-details
    font-size .875rem
    color var(--secondaryTextColor)

.avatar
    display flex
    flex-direction row
    align-items center

    .recipient-user
        font-size 1.125rem

.link-recipient-icon-circle
    border 1px solid var(--borderMainColor)
    background-color unset
    color unset

.recipients-avatars
    display inline-flex
    flex-direction row-reverse
    margin-right 0.5rem

    &.--interactive
        cursor pointer

    & > *:not(:first-child)
        margin-right -0.6rem