@import "carbon-components/scss/globals/scss/vars";

/// UserAvatarGroup styles: an overlapping (stacked) or spaced row of avatars
/// with a "+N" overflow avatar.
/// @access private
/// @group components
@mixin user-avatar-group {
  .#{$prefix}--user-avatar-group {
    align-items: center;
  }

  // Avatars past `max` stay in the DOM but hide; the overflow chip stands in.
  .#{$prefix}--user-avatar-group [data-overflow="true"] {
    display: none;
  }

  //--------------------------------------------------------------------------
  // Overlapping (stacked) layout
  //--------------------------------------------------------------------------
  .#{$prefix}--user-avatar-group--overlap > * {
    // Stacking context so a hovered avatar can lift above its neighbors.
    position: relative;
  }

  // The overlap amount defaults to a spacing token. A negative `gap` overrides
  // it through the custom property.
  .#{$prefix}--user-avatar-group--overlap > * + * {
    margin-left: var(--user-avatar-group-overlap, -#{$carbon--spacing-03});
  }

  // A ring in the surrounding background color separates overlapping circles.
  // `box-shadow` is not clipped by the avatar's `overflow: hidden` frame.
  .#{$prefix}--user-avatar-group--overlap .#{$prefix}--user-avatar {
    box-shadow: 0 0 0 $carbon--spacing-01 var(--cds-ui-background, #{$ui-background});
  }

  // `stackOrder="first"`: reverse the default paint order so earlier avatars
  // sit above later ones. `--user-avatar-index` is set per avatar in JS;
  // `--user-avatar-group-count` on the container keeps every index positive.
  .#{$prefix}--user-avatar-group--stack-first > * {
    z-index: calc(
      var(--user-avatar-group-count, 0) - var(--user-avatar-index, 0)
    );
  }

  // The "+N" overflow chip opts out of item registration (it isn't a real
  // avatar), so it never gets a `--user-avatar-index`. Pin it behind every
  // real avatar instead of letting it fall back to the same z-index as the
  // first one. `data-avatar-group-overflow` is set by `UserAvatar` on the
  // tooltip wrapper (the direct child here), not just the inner avatar, so
  // this reaches it without `:has()`.
  .#{$prefix}--user-avatar-group--stack-first
    > [data-avatar-group-overflow="true"] {
    z-index: 0;
  }

  // Lift the hovered or focused avatar to the front of the stack, above the
  // highest z-index a reversed stack can produce.
  .#{$prefix}--user-avatar-group--overlap > *:hover,
  .#{$prefix}--user-avatar-group--overlap > *:focus-within {
    z-index: calc(var(--user-avatar-group-count, 0) + 1);
  }
}

@include exports("user-avatar-group") {
  @include user-avatar-group;
}