:host {
  display: inline-flex;
}

  :host * {
    box-sizing: border-box;
  }

.avatar-group {
  position: relative;
}

.avatar-group--diagonal-stack {
  display: inline-grid;
  grid-template-rows: repeat(9, 1fr);
  grid-template-columns: repeat(9, 1fr);
}

.avatar-group--diagonal-stack ::slotted(*:first-child) {
    z-index: 1;
    display: inline-flex;
    border-radius: 50%;
    box-shadow: 0 0 0 0.25rem var(--swirl-avatar-group-border-color);
    background-color: var(--swirl-avatar-group-border-color);
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 4;
    grid-row-end: 10;
  }

.avatar-group--diagonal-stack ::slotted(*:nth-child(2)) {
    z-index: 0;
    display: inline-flex;
    border-radius: 50%;
    grid-column-start: 4;
    grid-column-end: 10;
    grid-row-start: 1;
    grid-row-end: 7;
  }

.avatar-group--diagonal-stack ::slotted(*:nth-child(n + 3)) {
    display: none;
  }

.avatar-group--diagonal-stack .avatar-group__badge {
    position: absolute;
    right: calc(-1 * var(--s-space-4));
    bottom: calc(-1 * var(--s-space-4));
  }

.avatar-group--horizontal-stack {
  display: inline-flex;
}

.avatar-group--horizontal-stack .avatar-group__badge {
    display: none;
  }

.avatar-group--horizontal-stack ::slotted(*) {
    z-index: 1;
    display: inline-flex;
    border-radius: 50%;
    box-shadow: 0 0 0 0.125rem var(--swirl-avatar-group-border-color);
    background-color: var(--swirl-avatar-group-border-color);
  }

.avatar-group--horizontal-stack ::slotted(*:not(:first-child)) {
    margin-left: calc(-1 * var(--s-space-4));
  }

.avatar-group__badge {
  z-index: 3;
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
}

.avatar-group__badge ::part(badge) {
    box-shadow: 0 0 0 0.25rem var(--swirl-badge-border-color);
  }