@layer components {
  .person-row {
    --avatar-size: var(--row-icon-size);

    display: grid;
    grid-template-columns: max-content minmax(var(--space-0), var(--track-fill)) max-content;
    align-items: center;
    column-gap: var(--space-5);
    min-block-size: var(--tap-min);
    padding-block: var(--space-4);
  }

  .person-row + .person-row {
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .person-row__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: var(--space-0);
  }

  .person-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--type-body);
    color: var(--color-ink);
  }

  .person-row__detail {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--clamp-lines);
    overflow: hidden;
    font: var(--type-caption);
    color: var(--color-ink-faint);
    overflow-wrap: anywhere;
  }

  .person-row__detail:has(+ .person-row__number) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .person-row__number {
    font: var(--type-caption);
    font-variant-numeric: tabular-nums;
    color: var(--color-ink-faint);
    white-space: nowrap;
  }

  .person-row__action {
    display: flex;
    gap: var(--space-2);
  }

  .person-row--link {
    position: relative;
    isolation: isolate;
  }

  .person-row--link .person-row__name::after {
    content: "";
    position: absolute;
    inset: var(--space-0);
  }

  .person-row--link .person-row__action {
    position: relative;
    z-index: var(--z-raised);
  }

  @media (any-hover: hover) {
    .person-row--link .person-row__name:hover {
      color: var(--color-link);
    }
  }
}

@layer components {
  .person-row__name[aria-current] {
    color: var(--color-accent-ink);
  }
}