@import "../../../../../styles/index.scss";

.avatar-stack-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: $menuBorderColor;
  font-family: "Inter", sans-serif;
  gap: 2rem;
}

.avatar-stack {
  display: flex;
  gap: 8px;
  /* No longer reversing the flex-direction, will handle with z-index */
}

/* Wrapper for each avatar to handle positioning and z-index */
.avatar-wrapper {
  position: relative;
}

/* Apply negative margin to all but the first child to create overlap */
.avatar-wrapper:not(:first-child) {
  margin-left: -20px; /* Default overlap */
}
.avatar-wrapper--sm:not(:first-child) {
  margin-left: -15px;
}
.avatar-wrapper--md:not(:first-child) {
  margin-left: -20px;
}
.avatar-wrapper--lg:not(:first-child) {
  margin-left: -30px;
}

/* Base Avatar Styles */
.avatar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: $avatarBgColor;
  color: $whiteColor;
  font-weight: 600;
  overflow: hidden;
  border-style: solid;
  border-color: $whiteColor;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar__initials {
  text-transform: uppercase;
}

/* Size Variants */
.avatar--sm {
  width: 24px;
  height: 24px;
  font-size: 12px;
}
.avatar--md {
  width: 32px;
  height: 32px;
  font-size: 16px;
}
.avatar--lg {
  width: 36px;
  height: 36px;
  font-size: 20px;
}

.avatar--more {
  background-color: $subtleInfoColor;
  color: $primaryColor;
  border-color: $accordionBgBackground;
  font-size: 12px;
  font-weight: 500;
}
