/* ============================================================================
   Avatar v2 — COMPONENTS.md §16.1

   Shape is bound to `shape/radius/avatar`, NOT set as a variant. §16.1 F2: the
   token exists precisely so a brand can choose circular or squircle avatars,
   and encoding shape as a component property means a brand switch cannot
   change it. Binding the token is the fix, and it costs nothing.

   Sizes are the documented ladder (16 / 24 / 32 / 40 / 64 / 80 / 160). Only the
   steps this app uses are declared.

   TODO(tokens): every bare px length in this file is a SIZE or a BREAKPOINT.
   DESIGN.md §12.4 records both as not built, so literals stand in until they
   are. No colour, radius, spacing, border-width or font-size literal appears
   anywhere in this file.
   ========================================================================== */

.avatar {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: clip;
  border-radius: var(--shape-radius-avatar);
  /* TODO(tokens): size is not built — DESIGN.md §12.4. Literal px per the
     documented Avatar v2 ladder. */
  inline-size: 32px;
  block-size: 32px;
}

.avatar--24 {
  inline-size: 24px;
  block-size: 24px;
}
.avatar--32 {
  inline-size: 32px;
  block-size: 32px;
}
.avatar--40 {
  inline-size: 40px;
  block-size: 40px;
}

/* Avatar v2 / Content — Image */
.avatar__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Avatar v2 / Content — Icon */
.avatar--icon {
  background: var(--color-soft-neutral-default);
  color: var(--color-content-primary);
}

/* Avatar v2 / Content — Text (initials) */
.avatar--text {
  background: var(--color-soft-neutral-default);
  color: var(--color-content-primary);
  font-family: var(--font-family-display);
  font-size: var(--font-heading-sm-size);
  line-height: var(--font-heading-sm-line-height);
  font-weight: var(--font-weight-regular);
}