[data-fui-comp="ui-avatar-group"] {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  isolation: isolate;
}
[data-fui-comp="ui-avatar-group"] > *:not(:first-child) {
  margin-inline-start: -1rem; /* default md: ~40% overlap on 2.5rem avatars */
}
[data-fui-comp="ui-avatar-group"].ui-avatar-group--sm > *:not(:first-child) {
  margin-inline-start: -0.6rem;
}
[data-fui-comp="ui-avatar-group"].ui-avatar-group--lg > *:not(:first-child) {
  margin-inline-start: -1.25rem;
}
[data-fui-comp="ui-avatar-group"].ui-avatar-group--xl > *:not(:first-child) {
  margin-inline-start: -1.6rem;
}
/* Reverse z-index so earlier siblings sit on top of later ones — the
   first avatar is the most prominent. */
[data-fui-comp="ui-avatar-group"] > :nth-child(1) { z-index: 6; }
[data-fui-comp="ui-avatar-group"] > :nth-child(2) { z-index: 5; }
[data-fui-comp="ui-avatar-group"] > :nth-child(3) { z-index: 4; }
[data-fui-comp="ui-avatar-group"] > :nth-child(4) { z-index: 3; }
[data-fui-comp="ui-avatar-group"] > :nth-child(5) { z-index: 2; }
[data-fui-comp="ui-avatar-group"] > :nth-child(6) { z-index: 1; }
[data-fui-comp="ui-avatar-group"] > *:hover,
[data-fui-comp="ui-avatar-group"] > *:focus-within {
  z-index: 10; /* surface the focused/hovered chip above siblings */
}
[data-fui-comp="ui-avatar-group"] .ui-avatar {
  border: 2px solid var(--color-surface, #fff);
  box-sizing: content-box;
}
[data-fui-comp="ui-avatar-group"] .ui-avatar-group__overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 9999px;
  background: var(--color-muted, #e5e5e5);
  color: var(--color-text, #111);
  font-size: 0.8rem;
  font-weight: 600;
  border: 2px solid var(--color-surface, #fff);
}
[data-fui-comp="ui-avatar-group"].ui-avatar-group--sm .ui-avatar-group__overflow {
  inline-size: 1.5rem; block-size: 1.5rem; font-size: 0.65rem;
}
[data-fui-comp="ui-avatar-group"].ui-avatar-group--lg .ui-avatar-group__overflow {
  inline-size: 3rem; block-size: 3rem; font-size: 0.9rem;
}
[data-fui-comp="ui-avatar-group"].ui-avatar-group--xl .ui-avatar-group__overflow {
  inline-size: 4rem; block-size: 4rem; font-size: 1rem;
}
