/*
Avatar

An image over an initials (or icon) fallback, in a fixed square, so the
image arriving or failing changes what is visible, never the size.

  .avatar[data-size][data-shape][data-status]
  .avatar-image          stacked over the fallback; hidden unless loaded
  .avatar-fallback       initials or an icon on a muted fill
  .avatar-badge          a status dot at the bottom inline end
  .avatar-group          overlapping avatars, each ringed in the page color
  .avatar-group-count    "+3" in an avatar-sized chip
*/

@layer components {

.avatar {
  position:       relative;
  display:        inline-flex;
  flex:           none;
  box-sizing:     border-box;
  width:          var(--avatar-size);
  height:         var(--avatar-size);
  border-radius:  var(--radius-pill);
  vertical-align: middle;
  user-select:    none;
}

.avatar.is-sm { --avatar-size: var(--avatar-size-sm); }
.avatar.is-lg { --avatar-size: var(--avatar-size-lg); }

.avatar.is-square {
  border-radius: var(--radius-control);
}

.avatar-image,
.avatar-fallback {
  position:      absolute;
  inset:         0;
  width:         100%;
  height:        100%;
  border-radius: inherit;
}

.avatar-image {
  z-index:    1;
  object-fit: cover;
}

.avatar-fallback {
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  background:      var(--bg-muted);
  color:           var(--ink-soft);
  font-family:     var(--font-ui);
  font-size:       calc(var(--avatar-size) * 0.4);
  font-weight:     var(--weight-medium);
  line-height:     1;
  text-transform:  uppercase;
}

.avatar-fallback > svg {
  width:  50%;
  height: 50%;
}

/* Visibility, never display: a hidden image still loads (and lazy-loads),
   and neither part ever leaves the square. An image on its way out
   (data-ending-style) stays visible until its exit transition ends. */
.avatar[data-status="loading"] .avatar-image:not([data-ending-style]),
.avatar[data-status="error"] .avatar-image:not([data-ending-style]) {
  visibility: hidden;
}

.avatar[data-status="loaded"] .avatar-fallback,
.avatar[data-delayed] .avatar-fallback {
  visibility: hidden;
}

.avatar-badge {
  --avatar-badge-size: calc(var(--avatar-size) * 0.3);

  position:        absolute;
  inset-inline-end: 0;
  bottom:          0;
  z-index:         2;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-sizing:      border-box;
  min-width:       var(--avatar-badge-size);
  height:          var(--avatar-badge-size);
  border-radius:   var(--radius-pill);
  background:      var(--avatar-badge-color, var(--success));
  box-shadow:      0 0 0 calc(var(--surface-border-width) * 2) var(--bg);
  color:           var(--white);
}

.avatar-badge > svg {
  width:  70%;
  height: 70%;
}

/* At sm the dot is too small for a glyph: it stays a plain dot (shadcn). */
.avatar.is-sm .avatar-badge > svg {
  display: none;
}

.avatar-badge.is-accent  { --avatar-badge-color: var(--accent); color: var(--accent-ink); }
.avatar-badge.is-warning { --avatar-badge-color: var(--warning); }
.avatar-badge.is-danger  { --avatar-badge-color: var(--danger); }
.avatar-badge.is-muted   { --avatar-badge-color: var(--ink-dim); }

.avatar-group {
  display:     inline-flex;
  align-items: center;
  isolation:   isolate;
}

.avatar-group > .avatar {
  box-shadow: 0 0 0 calc(var(--surface-border-width) * 2) var(--bg);
}

.avatar-group > .avatar + .avatar {
  margin-inline-start: calc(var(--avatar-size) * -0.25);
}

/* A count with no size of its own matches the group's avatars (shadcn's
   group-has-data-[size] rule). An explicit size (is-sm, is-md, is-lg) wins. */
.avatar-group:has(> .avatar.is-sm:not(.avatar-group-count)) > .avatar-group-count:not(.is-md, .is-lg) {
  --avatar-size: var(--control-height-sm);
}

.avatar-group:has(> .avatar.is-lg:not(.avatar-group-count)) > .avatar-group-count:not(.is-sm, .is-md) {
  --avatar-size: var(--control-height-lg);
}

.avatar-group-count .avatar-fallback {
  font-size:      calc(var(--avatar-size) * 0.34);
  text-transform: none;
}

}