/* =============================================================================
   KINKO DESIGN SYSTEM — Avatar Component
   Spec: components/avatar.md
   Figma: COMPONENT_SET 2269:5388 · Avatar collection: VariableCollectionId:2269:5271
   Sub-components: Avatar circle (placeholder + image) · Checkbox badge (top-right)
   Sizes: 24 · 32 · 40 · 64 · 72 · 90 · 124
   States: Default (unselected) · Selected (green ring + checked badge)
   Figma boolean property: Checkbox=true/false controls badge visibility → .avatar--no-checkbox

   3-TIER TOKEN ARCHITECTURE:
   Layer 1 (Primitive) → Layer 2 (Semantic) → Layer 3 (--avatar-*) → styles
   Never use --surface-*, --text-*, --action-* directly below :root.
   ============================================================================= */

/* =============================================================================
   LAYER 3 — Avatar component tokens (alias semantic tokens)

   A) COLOR tokens  — every individual color, each aliasing one semantic token
   B) COMPOSITE tokens — none required for this component
   ============================================================================= */

:root {

  /* ════════════════════════════════════════════════════════════════
     A) COLOR TOKENS — one token per color, aliases semantic tokens
     ════════════════════════════════════════════════════════════════ */

  /* ── Placeholder background ── */
  --avatar-bg:       var(--surface-tertiary);  /* grey-100 — placeholder fill */

  /* ── Person silhouette icon ── */
  --avatar-icon:     var(--text-disabled);     /* grey-300 — head + body shape */

  /* ── Selection ring ── */
  --avatar-ring:         var(--action-primary);    /* green-500 — 2px border when selected */

  /* ── Default ring (unselected) ── */
  --avatar-ring-default: var(--border-default);    /* grey-200 — ring shown before selection; Figma var: avatar/ring-default */
}

/* =============================================================================
   COMPONENT STYLES — use only --avatar-* vars below this line
   ============================================================================= */

/* ── Avatar container ──
   Position relative so the checkbox badge can be placed absolutely.
   overflow: visible allows the checkbox to extend outside bounds. */
.avatar {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Avatar circle (clipped frame) ──
   Clips image/placeholder content to the circle shape.
   The 2px ring border lives here (matches Figma INSIDE stroke):
   transparent by default, --avatar-ring (green-500) when selected.
   `box-sizing: border-box` keeps outer dimensions equal to .avatar--{size}. */
.avatar__circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--avatar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.avatar--selected .avatar__circle {
  border-color: var(--avatar-ring);
}

/* ── User photo ── */
.avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Placeholder (shown when no image) ── */
.avatar__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--avatar-icon);
}

/* ── Placeholder person icon (SVG scales with container) ── */
.avatar__placeholder-icon {
  /* Icon fills 70% of the circle so shoulders are slightly clipped — matches Figma */
  width: 70%;
  height: 70%;
  display: block;
}

/* ── Checkbox badge (top-right) ──
   Wraps the Checkbox Control component. Anchored to the top-right corner of
   the avatar — sits INSIDE the avatar bounds (matches Figma where the badge
   is layoutPositioning='ABSOLUTE' at the top-right of an exactly-Size×Size
   variant). The visible 16px green pill sits 4px inset from the corner due
   to the Checkbox Control instance's own 4px padding. The badge is always
   present in the DOM — its visual state is driven by the input. */
.avatar__check {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  /* Prevent checkbox label from stretching the avatar layout */
  line-height: 0;
}

/* ── No-checkbox modifier ──
   Maps to Figma boolean property: Checkbox=false
   Hides the badge entirely — use when the avatar is display-only (not selectable).
   Default (no modifier) = Checkbox=true = badge is visible. */
.avatar--no-checkbox .avatar__check {
  display: none;
}

/* =============================================================================
   SIZE MODIFIERS
   ============================================================================= */

.avatar--24  { width: 24px;  height: 24px; }
.avatar--32  { width: 32px;  height: 32px; }
.avatar--40  { width: 40px;  height: 40px; }
.avatar--64  { width: 64px;  height: 64px; }
.avatar--72  { width: 72px;  height: 72px; }
.avatar--90  { width: 90px;  height: 90px; }
.avatar--124 { width: 124px; height: 124px; }