$counter-fill: var(
  --wds-avatar-group-counter-fill,
  var(--wds-color-fill-standard-tertiary)
) !default;
$counter-gradient-1: var(
  --wds-avatar-group-counter-fill-gradient-1,
  var(--wds-color-text-standard-secondary)
) !default;
$counter-gradient-1-mix: var(--wds-avatar-group-counter-fill-gradient-1-mix, 20%);
$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);
$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;
  }

  &__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);
  }

  &__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});
  }
}