.recipients--multi-select-item-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  color: var(--neutral-900);
  gap: .5rem;
  max-width: 320px;

  > svg {
    flex: 0 0 auto;
  }

  /* The name yields first: it's the ambiguous part, so truncating it is safe. */
  span.main-text {
    font-size: var(--rem-14);
    color: var(--text-label);
    flex: 0 1 auto;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  /* The secondary text is what disambiguates two same-named rows, so it never
     shrinks. The cap only exists to keep a long provider role from crowding
     out the name entirely. */
  span.secondary-text {
    font-size: var(--rem-12);
    line-height: var(--rem-14);
    color: var(--neutral-600);
    flex: 0 0 auto;
    max-width: 50%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}

#search-results-recipients {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  height: fit-content;

  &:has(.recipients--multi-select-item-container) {
    padding-top: .25rem;
  }
}