$avatar-sizes: 20, 24, 30, 36, 42, 48, 72, 90, 120;

.AvatarGroup {
  --b-avatar-group-spacing: 0;
  --b-avatar-group-size: 0;

  position: relative;
  z-index: var(--layer-z-index-base);
  display: flex;

  @each $size in $avatar-sizes {
    :where(.size-#{$size}) {
      --b-avatar-group-size: #{$size}px;
    }
  }

  & > * + * {
    margin-left: var(--b-avatar-group-spacing);
  }
}

.AvatarEllipsisIconWrapper {
  position: relative;
}

.AvatarEllipsisIcon {
  position: absolute;
  z-index: var(--layer-z-index-floating);
  top: 0;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  outline: none;
}

.AvatarEllipsisCountWrapper {
  --b-avatar-group-ellipsis-pr: 0;
  --b-avatar-group-ellipsis-ml: 0;

  margin-left: var(--b-avatar-group-ellipsis-ml);
  padding-right: var(--b-avatar-group-ellipsis-pr);

  &:where(.size-20) {
    --b-avatar-group-ellipsis-pr: 4px;
  }

  &:where(.size-24) {
    --b-avatar-group-ellipsis-pr: 5px;
  }

  &:where(
      .size-30,
      .size-36,
      .size-42,
      .size-48,
      .size-72,
      .size-90,
      .size-120
    ) {
    --b-avatar-group-ellipsis-pr: 6px;
  }
}

.AvatarEllipsisCount {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--b-avatar-group-size);
}