/* ==========================================================================
   Component: Avatar Stack
   ========================================================================== */

/* Import subcomponents */
@import "overflow.css";

/* Base Avatar Stack */
.c-avatar-stack {
  align-items: center;
  display: inline-flex;
  flex-direction: row;
}

/* Stack items with overlap */
.c-avatar-stack__item {
  display: inline-flex;
  position: relative;
}

/* Spacing variants - controls overlap amount */
.c-avatar-stack--tight .c-avatar-stack__item:not(:first-child) {
  margin-left: -12px;
}

.c-avatar-stack--normal .c-avatar-stack__item:not(:first-child) {
  margin-left: -8px;
}

.c-avatar-stack--loose .c-avatar-stack__item:not(:first-child) {
  margin-left: -4px;
}

/* Add border to avatars for better overlap visibility */
.c-avatar-stack__item .c-avatar {
  border: 2px solid var(--surface-card);
  box-sizing: content-box;
}

/* Hover effect - lift avatar on hover */
.c-avatar-stack__item:hover {
  z-index: 100 !important;
}

.c-avatar-stack__item:hover .c-avatar {
  transform: translateY(-2px);
  transition: transform var(--transition-fast);
}