@layer components {
  .role-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .role-editor__person {
    --avatar-size: var(--participant-size);

    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-block-end: var(--space-6);
  }

  .role-editor__name {
    font: var(--type-heading);
    color: var(--color-ink);
  }

  .role-editor__context {
    font: var(--type-caption);
    color: var(--color-ink-faint);
  }
}