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

  .shared-contacts__title {
    font: var(--type-title-1);
    color: var(--color-ink-display);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
  }

  .shared-contacts__people {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
  }

  .shared-contacts__person {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .shared-contacts:has(option[value=""]:checked) .shared-contacts__roles {
    display: none;
  }
}