/*
  sizes: .a-avatar-group--{sm|md|lg|xl} (default xl)
*/

.a-avatar-group {
  --max: 5;
  --spacing: 10px;
  --border-width: var(--lens-semantic-border-width-thin);
  --border-color: var(--lens-semantic-color-surface-default);
  --a-avatar-radius: var(--a-avatar-group-radius, var(--lens-semantic-radius-full));
  --a-avatar-size: var(--a-avatar-group-size, var(--lens-core-spacing-9));
  --a-avatar-icon-size: var(--a-avatar-group-icon-size, var(--lens-semantic-icon-size-xl));
  --a-avatar-font-size: var(
    --a-avatar-group-font-size,
    var(--lens-semantic-font-text-body-font-size)
  );
  --a-avatar-font-weight: var(
    --a-avatar-group-font-weight,
    var(--lens-semantic-font-weight-emphasis)
  );
  --a-avatar-line-height: var(
    --a-avatar-group-line-height,
    var(--lens-semantic-font-text-body-line-height)
  );
  --a-avatar-letter-spacing: var(
    --a-avatar-group-letter-spacing,
    var(--lens-semantic-font-text-body-letter-spacing)
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  isolation: isolate;
  &:is(ul) {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  & .a-avatar {
    box-shadow: 0 0 0 var(--a-avatar-group-border-width, var(--border-width))
      var(--a-avatar-group-border-color, var(--border-color));
    position: relative;
    &:has(+ .a-avatar) {
      margin-inline-end: calc(-1 * var(--a-avatar-group-spacing, var(--spacing)));
    }
  }
  &.a-avatar-group--sm {
    --spacing: var(--lens-core-spacing-0-25);
    --a-avatar-size: var(--a-avatar-group-size, var(--lens-core-spacing-3));
    --a-avatar-icon-size: var(--a-avatar-group-icon-size, var(--lens-semantic-icon-size-md));
  }
  &.a-avatar-group--md {
    --spacing: var(--lens-core-spacing-0-5);
    --a-avatar-size: var(--a-avatar-group-size, var(--lens-core-spacing-4));
  }
  &.a-avatar-group--sm,
  &.a-avatar-group--md {
    --a-avatar-font-size: var(
      --a-avatar-group-font-size,
      var(--lens-semantic-font-label-xs-font-size)
    );
    --a-avatar-line-height: var(
      --a-avatar-group-line-height,
      var(--lens-semantic-font-label-xs-line-height)
    );
    --a-avatar-letter-spacing: var(
      --a-avatar-group-letter-spacing,
      var(--lens-semantic-font-label-xs-letter-spacing)
    );
  }
  &.a-avatar-group--lg {
    --spacing: 6px;
    --a-avatar-size: var(--a-avatar-group-size, var(--lens-core-spacing-5));
    --a-avatar-font-size: var(
      --a-avatar-group-font-size,
      var(--lens-semantic-font-text-md-font-size)
    );
    --a-avatar-line-height: var(
      --a-avatar-group-line-height,
      var(--lens-semantic-font-text-md-line-height)
    );
    --a-avatar-letter-spacing: var(
      --a-avatar-group-letter-spacing,
      var(--lens-semantic-font-text-md-letter-spacing)
    );
  }
  &.a-avatar-group--xl {
    --spacing: 10px;
    --a-avatar-font-size: var(
      --a-avatar-group-font-size,
      var(--lens-semantic-font-text-body-font-size)
    );
    --a-avatar-line-height: var(
      --a-avatar-group-line-height,
      var(--lens-semantic-font-text-body-line-height)
    );
    --a-avatar-letter-spacing: var(
      --a-avatar-group-letter-spacing,
      var(--lens-semantic-font-text-body-letter-spacing)
    );
  }
  &.a-avatar-group--md,
  &.a-avatar-group--lg,
  &.a-avatar-group--xl {
    --a-avatar-icon-size: var(--a-avatar-group-icon-size, var(--lens-semantic-icon-size-lg));
  }
}

@supports (z-index: sibling-index()) {
  .a-avatar-group .a-avatar {
    z-index: calc(sibling-count() - sibling-index() + 1);
  }
}

@supports not (z-index: sibling-index()) {
  .a-avatar-group .a-avatar {
    &:nth-of-type(1) {
      z-index: calc(var(--a-avatar-group-max, var(--max)));
    }
    &:nth-of-type(2) {
      z-index: calc(var(--a-avatar-group-max, var(--max)) - 1);
    }
    &:nth-of-type(3) {
      z-index: calc(var(--a-avatar-group-max, var(--max)) - 2);
    }
    &:nth-of-type(4) {
      z-index: calc(var(--a-avatar-group-max, var(--max)) - 3);
    }
    &:nth-of-type(5) {
      z-index: calc(var(--a-avatar-group-max, var(--max)) - 4);
    }
    &:nth-of-type(6) {
      z-index: calc(var(--a-avatar-group-max, var(--max)) - 5);
    }
    &:nth-of-type(7) {
      z-index: calc(var(--a-avatar-group-max, var(--max)) - 6);
    }
    &:nth-of-type(8) {
      z-index: calc(var(--a-avatar-group-max, var(--max)) - 7);
    }
    &:nth-of-type(9) {
      z-index: calc(var(--a-avatar-group-max, var(--max)) - 8);
    }
    &:nth-of-type(10) {
      z-index: calc(var(--a-avatar-group-max, var(--max)) - 9);
    }
  }
}