$gap-stretched: var(--wds-avatar-group-gap-stretched, 6px);
$condensed-ring-width: var(--wds-avatar-group-condensed-ring-width, 2px);
$condensed-counter-ring-width: var(
  --wds-avatar-group-condensed-counter-ring-width,
  var(--wds-avatar-group-condensed-ring-width, 2px)
);
$light-fill: var(--wds-color-fill-light-primary, var(--wsr-color-D80, #ffffff));
$counter-fill: var(--wds-avatar-group-counter-fill, #{$light-fill});
$counter-gradient-1: var(
  --wds-avatar-group-counter-fill-gradient-1,
  var(--wds-color-fill-transparent-tertiary, transparent)
);
$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-fill-transparent-tertiary, transparent)
);
$counter-border-width: var(
  --wds-avatar-group-counter-border-width,
  var(--wds-border-width-200, 2px)
);
$counter-border-fill: var(
  --wds-avatar-group-counter-border-fill,
  var(
    --wds-color-fill-dark-secondary-disabled,
    var(--wsr-color-D10-10, rgba(0, 6, 36, 0.1))
  )
);
$counter-blur: var(--wds-avatar-group-counter-background-blur, 0px);
$counter-font-size: var(
  --wds-avatar-group-counter-font-size,
  var(--wds-font-size-200, 12px)
);
$avatar-size-tiny: var(--wds-avatar-size-tiny, 18px);
$divider-width: var(
  --wds-avatar-group-divider-width,
  var(--wds-border-width-100, 1px)
);
$divider-radius: var(--wds-avatar-group-divider-radius, 0px);
$divider-margin-start: var(--wds-avatar-group-divider-margin-start, 6px);
$divider-margin-start-condensed: var(
  --wds-avatar-group-divider-margin-start-condensed,
  18px
);
$divider-margin-end: var(--wds-avatar-group-divider-margin-end, 12px);
$divider-inset: var(--wds-avatar-group-divider-inset-vertical, 0px);

.avatar-group {
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;

  &__avatar-container {
    display: flex;
    flex-direction: row;
    z-index: 1;
  }

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

  &--type-condensed &__avatar-container {
    margin-right: -6px;
    border-radius: 50%;
    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;
    background-color: $light-fill;
  }

  &__more-indicator-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    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-text {
    color: var(
      --wds-color-text-standard-secondary,
      var(--wsr-color-D20, #333853)
    );
    text-align: center;
    /* stylelint-disable-next-line plugin/use-baseline */
    user-select: none;
  }

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

  &__more-indicator-circle--size-small {
    height: 20px;
    width: 20px;
  }

  &__more-indicator-circle--size-medium {
    height: 26px;
    width: 26px;
  }

  &__more-indicator-circle#{&}__more-indicator-circle--size-tiny#{&}__more-indicator-circle--size-tiny
    &__more-indicator-text,
  &__more-indicator-circle#{&}__more-indicator-circle--size-small#{&}__more-indicator-circle--size-small
    &__more-indicator-text {
    font-size: 10px;
  }

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

  &__divider {
    margin-right: 6px;
    background-color: var(
      --wds-color-border-dark-secondary,
      var(--wsr-color-D60, #dfe5eb)
    );
    width: $divider-width;
    border-radius: $divider-radius;
  }

  /* Keep spacing above Divider's margin reset. */
  &__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});
  }
}