/* Material Design 3 Avatar Component
 * ==========================================================================
 * MD3 Avatars represent users or entities with images or initials
 * Reference: Material Design 3 principles applied to user representation
 */

/* Avatar Base
 * -------------------------------------------------------------------------- */

.avatar {
 
  /* Structure */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;

  /* Sizing - uses CSS custom property for flexibility */
  --avatar-size: 40px;
  width: var(--avatar-size);
  height: var(--avatar-size);

  /* Appearance */
  --avatar-background: red;
  --avatar-color: white;
  border-radius: var(--radius-full);
  background: var(--avatar-background, var(--color-bg--container));
  color: var(--avatar-color, var(--color-ink--container));
  overflow: hidden;

  /* Typography for initials */
  font-size: calc(var(--avatar-size) * 0.4);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;

  /* Interaction */
  user-select: none;
  -webkit-user-select: none;
}

/* Avatar image */
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Avatar sizes
 * -------------------------------------------------------------------------- */

.avatar--extra-small {
  --avatar-size: 24px;
  font-size: 10px;
}

.avatar--small {
  --avatar-size: 32px;
  font-size: 13px;
}

.avatar--medium {
  --avatar-size: 40px;
  font-size: 16px;
}

.avatar--large {
  --avatar-size: 56px;
  font-size: 22px;
}

.avatar--extra-large {
  --avatar-size: 96px;
  font-size: 38px;
}

/* Avatar variants
 * -------------------------------------------------------------------------- */

/* Square avatar (for organizations, apps, etc.) */
.avatar--square {
  border-radius: 12px;
}

.avatar--square.avatar--extra-small {
  border-radius: 4px;
}

.avatar--square.avatar--small {
  border-radius: 6px;
}

.avatar--square.avatar--medium {
  border-radius: 8px;
}

.avatar--square.avatar--large {
  border-radius: 12px;
}

.avatar--square.avatar--extra-large {
  border-radius: 16px;
}

/* Outlined avatar */
.avatar--outlined {
  border: 2px solid var(--color-border);
  background: transparent;
}

.avatar--outlined.avatar-initials {
  background: var(--color-bg--surface);
  color: var(--color-ink--surface);
}

/* Avatar with status indicator
 * -------------------------------------------------------------------------- */

.avatar--with-status {
  position: relative;
}

.avatar__status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(var(--avatar-size) * 0.3);
  height: calc(var(--avatar-size) * 0.3);
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  border: 2px solid var(--color-bg--surface);
  background: var(--color-border);
}

.avatar__status--online {
  background: var(--color-success);
}

.avatar__status--busy {
  background: var(--color-warning);
}

.avatar__status--offline {
  background: var(--color-border);
}

/* Avatar link wrapper
 * -------------------------------------------------------------------------- */

.avatar-link {
  display: inline-flex;
  text-decoration: none;
  border-radius: 50%;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.avatar-link:hover {
  transform: scale(1.05);
}

.avatar-link:active {
  transform: scale(0.95);
}

.avatar-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Avatar group
 * -------------------------------------------------------------------------- */

.avatar-group {
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  padding-left: calc(var(--avatar-size) * 0.25);
}

.avatar-group .avatar {
  margin-left: calc(var(--avatar-size) * -0.25);
  border: 2px solid var(--color-bg--surface);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
              z-index 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.avatar-group .avatar:hover {
  transform: scale(1.1);
  z-index: var(--layer-base);
}

/* Reverse the visual order to match DOM order */
.avatar-group--stacked {
  flex-direction: row;
  padding-left: 0;
  padding-right: calc(var(--avatar-size) * 0.25);
}

.avatar-group--stacked .avatar {
  margin-left: 0;
  margin-right: calc(var(--avatar-size) * -0.25);
}

/* Avatar overflow indicator */
.avatar-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background: var(--color-bg--container);
  color: var(--color-ink--container);
  font-size: calc(var(--avatar-size) * 0.35);
  font-weight: 500;
  border: 2px solid var(--color-bg--surface);
  margin-left: calc(var(--avatar-size) * -0.25);
}

/* Avatar with badge
 * -------------------------------------------------------------------------- */

.avatar--with-badge {
  position: relative;
}

.avatar--with-badge .badge {
  position: absolute;
  top: 0;
  right: 0;
}

/* Loading state
 * -------------------------------------------------------------------------- */

.avatar--loading {
  background: linear-gradient(
    90deg,
    var(--color-bg--container) 0%,
    var(--color-bg--surface) 50%,
    var(--color-bg--container) 100%
  );
  background-size: 200% 100%;
  animation: avatar-skeleton 1.5s ease-in-out infinite;
}

@keyframes avatar-skeleton {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Avatar colors (for initials)
 * -------------------------------------------------------------------------- */

.avatar--color-1 {
  --avatar-background: var(--rust-red);
  --avatar-color: var(--on-rust-red);
}

.avatar--color-2 {
  --avatar-background: var(--burnt-orange);
  --avatar-color: var(--on-burnt-orange);
}

.avatar--color-3 {
  --avatar-background: var(--slate-blue);
  --avatar-color: var(--on-slate-blue);
}

.avatar--color-4 {
  --avatar-background: var(--warm-taupe);
  --avatar-color: var(--on-warm-taupe);
}

.avatar--color-5 {
  --avatar-background: var(--vivid-orange);
  --avatar-color: var(--on-vivid-orange);
}

.avatar--color-6 {
  --avatar-background: var(--coral-red);
  --avatar-color: var(--on-coral-red);
}

.avatar--color-7 {
  --avatar-background: var(--crimson);
  --avatar-color: var(--on-crimson);
}

.avatar--color-8 {
  --avatar-background: var(--olive-drab);
  --avatar-color: var(--on-olive-drab);
}

.avatar--color-9 {
  --avatar-background: var(--terra-cotta);
  --avatar-color: var(--on-terra-cotta);
}

.avatar--color-10 {
  --avatar-background: var(--taupe);
  --avatar-color: var(--on-taupe);
}


/* Responsive behavior
 * -------------------------------------------------------------------------- */

@media (max-width: 40em) {
  /* Reduce avatar sizes on mobile */
  .avatar--extra-large {
    --avatar-size: 72px;
    font-size: 29px;
  }
}

/* Examples of usage:
 * --------------------------------------------------------------------------
 *
 * Basic avatar with image:
 * <%= avatar_for(user) %>
 *
 * Avatar with initials:
 * <div class="avatar avatar--medium avatar-initials">JD</div>
 *
 * Avatar with custom size and link:
 * <%= avatar_for(user, size: :large, url: user_path(user)) %>
 *
 * Avatar group:
 * <div class="avatar-group">
 *   <%= avatar_for(user1, size: :small) %>
 *   <%= avatar_for(user2, size: :small) %>
 *   <%= avatar_for(user3, size: :small) %>
 *   <span class="avatar-more">+5</span>
 * </div>
 *
 * Avatar with status:
 * <div class="avatar--with-status">
 *   <%= avatar_for(user) %>
 *   <span class="avatar__status avatar__status--online"></span>
 * </div>
 */