$light-fill: var(--wds-color-fill-light-primary);
$condensed-ring-width: var(--wds-avatar-group-condensed-ring-width, 1px);
$condensed-counter-ring-width: var(
  --wds-avatar-group-condensed-counter-ring-width,
  0px
);
$counter-fill: var(
  --wds-avatar-group-counter-fill,
  var(--wds-color-white-transparent-50)
);
$counter-gradient-1: var(--wds-avatar-group-counter-fill-gradient-1, #d0d0d0);
$counter-gradient-1-mix: var(
  --wds-avatar-group-counter-fill-gradient-1-mix,
  100%
);
$counter-gradient-2: var(
  --wds-avatar-group-counter-fill-gradient-2,
  var(--wds-color-white-transparent-0)
);
$counter-border-width: var(
  --wds-avatar-group-counter-border-width,
  var(--wds-border-width-100)
);
$counter-border-fill: var(
  --wds-avatar-group-counter-border-fill,
  var(--wds-color-white)
);
$counter-blur: var(--wds-avatar-group-counter-background-blur, 4px);
$counter-font-size: var(
  --wds-avatar-group-counter-font-size,
  var(--wds-font-size-100)
);
$avatar-size-tiny: var(--wds-avatar-size-tiny, 20px);
$gap-stretched: var(--wds-avatar-group-gap-stretched, var(--wds-space-100));
$divider-width: var(--wds-avatar-group-divider-width, 1.5px);
$divider-radius: var(--wds-avatar-group-divider-radius, 1px);
$divider-margin-start: var(--wds-avatar-group-divider-margin-start, 4px);
$divider-margin-start-condensed: var(
  --wds-avatar-group-divider-margin-start-condensed,
  14px
);
$divider-margin-end: var(--wds-avatar-group-divider-margin-end, 8px);
$divider-inset: var(--wds-avatar-group-divider-inset-vertical, 8px);

.avatar-group {
  &--type-stretched &__avatar-container {
    margin-right: $gap-stretched;
  }

  &--type-condensed &__avatar-container {
    border: $condensed-ring-width solid $light-fill;
  }

  /* stylelint-disable-next-line plugin/use-baseline */
  &--type-condensed &__avatar-container:has(> #{&}__more-indicator-circle) {
    border-width: $condensed-counter-ring-width;
  }

  &__more-indicator-circle {
    background-color: $counter-fill;
    /* stylelint-disable-next-line plugin/use-baseline */
    background-image: linear-gradient(
      -90deg,
      color-mix(in srgb, $counter-gradient-1 $counter-gradient-1-mix, transparent),
      $counter-gradient-2
    );
    border: $counter-border-width solid $counter-border-fill;
    padding: calc(2px - #{$counter-border-width});
    /* stylelint-disable-next-line plugin/use-baseline */
    backdrop-filter: blur($counter-blur);
  }

  &__more-indicator-circle--size-tiny {
    height: calc(#{$avatar-size-tiny} - 4px);
    width: calc(#{$avatar-size-tiny} - 4px);
  }

  &__more-indicator-circle#{&}__more-indicator-circle--size-medium#{&}__more-indicator-circle--size-medium
    &__more-indicator-text {
    font-size: $counter-font-size;
  }

  &__divider {
    width: $divider-width;
    border-radius: $divider-radius;
  }

  &__divider#{&}__divider--type-stretched {
    margin-left: $divider-margin-start;
    margin-right: $divider-margin-end;
  }

  &__divider#{&}__divider--type-condensed {
    margin-left: $divider-margin-start-condensed;
    margin-right: $divider-margin-end;
  }

  &__divider--size-tiny {
    height: calc(18px - #{$divider-inset});
  }

  &__divider--size-small {
    height: calc(24px - 1.5 * #{$divider-inset});
  }

  &__divider--size-medium {
    height: calc(30px - 2 * #{$divider-inset});
  }
}