:host {
  /* ---- Size axis (default = md) ---- */
  --_size: var(--avatar-container-size-md);
  --_font-size: var(--avatar-initials-font-size-md);
  --_line-height: var(--avatar-initials-line-height-md);
  --_icon-size: var(--avatar-icon-size-md);
  --_stack-overlap: var(--avatar-stack-overlap-md);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;

  /* Box itself */
  position: relative;
  box-sizing: border-box;
  inline-size: var(--_size);
  block-size: var(--_size);

  /* Background + radius (so the focus outline draws against a solid edge) */
  background: var(--avatar-container-background);
  border-radius: var(--avatar-container-border-radius);

  /* Tokens shared by all visual modes */
  color: var(--avatar-icon-color);
  font-family: var(--avatar-initials-font-family);
  font-weight: var(--avatar-initials-font-weight);
  font-size: var(--_font-size);
  line-height: var(--_line-height);
  text-align: center;

  -webkit-user-select: none;
  user-select: none;

  /* Smooth ring fade on focus */
  transition-property: box-shadow;
  transition-duration: var(--avatar-container-transition-duration);
  transition-timing-function: var(--avatar-container-transition-timing-function);
}

/* ---- Size axis ---- */
:host([size='xs']) {
  --_size: var(--avatar-container-size-xs);
  --_font-size: var(--avatar-initials-font-size-xs);
  --_line-height: var(--avatar-initials-line-height-xs);
  --_icon-size: var(--avatar-icon-size-xs);
  --_stack-overlap: var(--avatar-stack-overlap-xs);
}

:host([size='sm']) {
  --_size: var(--avatar-container-size-sm);
  --_font-size: var(--avatar-initials-font-size-sm);
  --_line-height: var(--avatar-initials-line-height-sm);
  --_icon-size: var(--avatar-icon-size-sm);
  --_stack-overlap: var(--avatar-stack-overlap-sm);
}

:host([size='md']) {
  --_size: var(--avatar-container-size-md);
  --_font-size: var(--avatar-initials-font-size-md);
  --_line-height: var(--avatar-initials-line-height-md);
  --_icon-size: var(--avatar-icon-size-md);
  --_stack-overlap: var(--avatar-stack-overlap-md);
}

:host([size='lg']) {
  --_size: var(--avatar-container-size-lg);
  --_font-size: var(--avatar-initials-font-size-lg);
  --_line-height: var(--avatar-initials-line-height-lg);
  --_icon-size: var(--avatar-icon-size-lg);
  --_stack-overlap: var(--avatar-stack-overlap-lg);
}

:host([size='xl']) {
  --_size: var(--avatar-container-size-xl);
  --_font-size: var(--avatar-initials-font-size-xl);
  --_line-height: var(--avatar-initials-line-height-xl);
  --_icon-size: var(--avatar-icon-size-xl);
  --_stack-overlap: var(--avatar-stack-overlap-xl);
}

/* For `type='photo'` we hide the background tint — the image fills the circle. */
:host([type='photo']) {
  background: transparent;
}

.inner {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden; /* clip the photo to the circle */
  border-radius: inherit;
}

/* ---- Photo ---- */
.photo {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: inherit;

  /* Prevent the user from dragging a personally-identifying portrait */
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* ---- Initials ---- */
.initials {
  display: inline-block;
  color: var(--avatar-initials-color);
  font-size: var(--_font-size);
  line-height: var(--_line-height);
  letter-spacing: 0;
  white-space: nowrap;
}

/* ---- Icon ---- */
.icon {
  color: var(--avatar-icon-color);
  pointer-events: none;

  /* The box comes from the token on every rung, so `--avatar-icon-size-*` stays
     the single source of truth and cannot drift from ICON_SIZE_FOR, which only
     picks the nearest mud-icon glyph scale. mud-icon sizes its own svg to 100%
     of its host box, so pinning the box scales the glyph with it. */
  inline-size: var(--_icon-size);
  block-size: var(--_icon-size);
}

/*
 * Badge slot — anchored on the avatar's north-east edge (~45°) so the badge
 * overlaps the circle instead of floating in the empty corner of the square
 * bounding box. 14.6% = (1 − sin45°) · 50%, the offset that lands on the
 * circumference; `translate(50%, -50%)` makes those insets address the slot's
 * centre, so the placement holds for any badge size (dot or count). `:empty`
 * keeps the wrapper out of the layout tree so an unused slot adds no touch target.
 */
.badge-slot {
  position: absolute;
  inset-block-start: 14.6%;
  inset-inline-end: 14.6%;
  transform: translate(50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 1;
}

/* Mirror the badge to the north-west edge in RTL contexts. */
:host(:dir(rtl)) .badge-slot {
  transform: translate(-50%, -50%);
}

.badge-slot:empty {
  display: none;
}

/* ---- Focus ring (host-level, mirrors Figma's double-ring effect) ---- */
:host(:focus-visible),
:host(.is-focus-demo) {
  outline: none;
  box-shadow:
    0 0 0 var(--avatar-focus-ring-inner-width) var(--avatar-focus-ring-inner-color),
    0 0 0 calc(var(--avatar-focus-ring-inner-width) + var(--avatar-focus-ring-outer-width))
      var(--avatar-focus-ring-outer-color);
}

/* Honor user motion preference. */
@media (prefers-reduced-motion: reduce) {
  :host {
    transition: none;
  }
}