.container
    position relative

.suggestionsContainer
    box-sizing border-box
    position absolute
    top 100%
    margin-top .5rem
    z-index var(--zIndex-alertMobile)
    width 100%
    overflow hidden
    box-shadow 0px 0px 0px 0.5px rgba(29, 33, 42, 0.12), 0px 2px 4px rgba(29, 33, 42, 0.0793047), 0px 4px 16px rgba(29, 33, 42, 0.06)
    border-radius .5rem
    background var(--paperBackgroundColor)
    display none

.suggestionsContainerOpen
    display block

.input
    width 100%

.suggestionsList
    max-height 9rem
    overflow auto
    margin 0 -1px 0 0
    padding .5rem 0
    list-style none

.suggestionHighlighted
    background var(--actionColorSelected)

.suggestionInput
  background unset

.recipientsContainer
    display flex
    flex-wrap wrap
    align-items center
    padding .25rem 3.5rem .25rem .5rem
    border-radius .25rem
    border 1px solid var(--borderMainColor)
    min-height 2.5rem
    max-height 6.75rem
    overflow auto
    position relative

    &:hover
        border 1px solid var(--borderMainColor)

    &:focus-within
        border 1px solid var(--primaryColor)

    input[type=email]
        color var(--primaryTextColor)
        width   auto
        flex-grow 1
        padding .5rem 0
        margin auto
        border  none
        &:hover
        &:focus
        &:focus-visible
            border none
            outline none
        &:first-child
            padding .25rem .5rem
        &::placeholder
            color var(--secondaryTextColor)
            font-size 1rem
.recipientChip
  margin .25rem .5rem .25rem 0

.endAdornment
    position absolute
    top .75rem
    right 1rem