[data-c42-avatar-group] {
  display: inline-flex;
  align-items: center;
}

/* Side-by-side mode when not stacked. */
[data-c42-avatar-group]:not([data-stacked='true']) {
  gap: 0.25rem;
}

/* Stacked mode: overlap each item and add a ring so they read as separate. */
[data-c42-avatar-group][data-stacked='true'] > [data-c42-avatar],
[data-c42-avatar-group][data-stacked='true'] > [data-c42-avatar-overflow] {
  box-shadow: 0 0 0 2px var(--c42-color-bg, #ffffff);
}

[data-c42-avatar-group][data-stacked='true'] > :not(:first-child) {
  margin-inline-start: var(--c42-avatar-overlap, -0.75rem);
}

[data-c42-avatar-group][data-spacing='sm'] {
  --c42-avatar-overlap: -1rem;
}

[data-c42-avatar-group][data-spacing='lg'] {
  --c42-avatar-overlap: -0.4rem;
}

/* Overflow chip mirrors the avatar shape/size. */
[data-c42-avatar-overflow] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--c42-avatar-size, 2.5rem);
  height: var(--c42-avatar-size, 2.5rem);
  border-radius: 50%;
  background: var(--c42-color-muted-bg, #e5e7eb);
  color: var(--c42-color-fg, #111827);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  user-select: none;
  flex: none;
}

[data-c42-avatar-overflow][hidden] {
  display: none;
}