/* LittleLives APP — Chip (Tags). Source: Figma Super App Uniform, node 2377:3851.
   9 colors × Filled/Outlined × l/m/s × Default/Active/Pressed/Disabled.
   Anatomy: [leading icon 24 / avatar 28] · Label (MA B2 16/Semi) · [dropdown 16] · [× close 20]. */

:root {
  --ll-chip-active-ring: #33C6F0;       /* stroke/brand — Active ring for ALL colors */
  --ll-chip-disabled-bg: #F0F0F0;       /* surface/default/disabled */
  --ll-chip-disabled-text: #BBBBBB;     /* content/disabled */
  --ll-chip-hairline: rgba(0,0,0,0.02); /* Filled default hairline */
  --ll-radius-2: 8px;
  --ll-font-body: 'Nunito Sans', system-ui, sans-serif;
}

/* per-color: --bg (default fill) · --pressed (pressed fill) · --border (outlined border) · --text */
.ll-chip[data-color="white"]      { --bg:#FFFFFF; --pressed:#F5F5F5; --border:#E6E6E6; --text:#333333; }
.ll-chip[data-color="grey"]       { --bg:#F5F5F5; --pressed:#E6E6E6; --border:#E6E6E6; --text:#333333; }
.ll-chip[data-color="brand"]      { --bg:#E6F8FD; --pressed:#CDF4FF; --border:#CDF4FF; --text:#0076A8; }
.ll-chip[data-color="avocado"]    { --bg:#E7F7ED; --pressed:#B5E7C7; --border:#B5E7C7; --text:#0C7E35; }
.ll-chip[data-color="strawberry"] { --bg:#FDECEE; --pressed:#FAC4CB; --border:#FAC4CB; --text:#A92D3D; }
.ll-chip[data-color="papaya"]     { --bg:#FEF2E9; --pressed:#FCD8BA; --border:#FCD8BA; --text:#AD5C16; }
.ll-chip[data-color="pear"]       { --bg:#F6FAEB; --pressed:#E3F0C2; --border:#E3F0C2; --text:#759228; }
.ll-chip[data-color="prune"]      { --bg:#F3ECFE; --pressed:#D9C3FA; --border:#D9C3FA; --text:#5D2BAA; }
.ll-chip[data-color="mango"]      { --bg:#FFFAE6; --pressed:#FFEFB2; --border:#FFEFB2; --text:#B59004; }

/* ===== base ===== */
.ll-chip {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;                    /* space-050 */
  max-width: 312px;
  padding: 4px 8px;            /* space-050 / space-100 */
  border: 0;
  border-radius: var(--ll-radius-2);
  font-family: var(--ll-font-body);
  font-weight: 600;            /* MA B2 16/Semi */
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  background: transparent;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.ll-chip[data-size="l"] { height: 36px; }  /* space-9 */
.ll-chip[data-size="m"] { height: 32px; }  /* space-8 */
.ll-chip[data-size="s"] { height: 28px; }
.ll-chip[data-size="xs"] { height: 24px; font-size: 14px; padding: 2px 4px; gap: 4px; }  /* minor tag — MA B3 14/Semi (date/time/inline allergen tags) */
.ll-chip[data-size="xs"] .ll-chip__label { padding: 0 2px; }

/* children */
.ll-chip__icon  { flex: 0 0 auto; display: inline-flex; align-items: center; }
.ll-chip__icon svg { display: block; width: 24px; height: 24px; }
.ll-chip__avatar { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9999px; overflow: hidden; border: 0.5px solid rgba(0,0,0,0.06); background: #E6E6E6 50% / cover no-repeat; }
.ll-chip__label { padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-chip__caret { flex: 0 0 auto; display: inline-flex; }
.ll-chip__caret svg { display: block; width: 16px; height: 16px; }
.ll-chip__close { flex: 0 0 auto; display: inline-flex; align-items: center; border: 0; background: transparent; padding: 0; margin: 0; cursor: pointer; color: inherit; }
.ll-chip__close svg { display: block; width: 20px; height: 20px; }

/* ===== FILLED ===== */
.ll-chip[data-style="filled"] { background: var(--bg); border: 1px solid var(--ll-chip-hairline); }
.ll-chip[data-style="filled"][data-state="pressed"],
.ll-chip[data-style="filled"]:not([data-state="disabled"]):active { background: var(--pressed); }

/* ===== OUTLINED ===== */
.ll-chip[data-style="outlined"] { background: transparent; border: 2px solid var(--border); }
.ll-chip[data-style="outlined"][data-state="pressed"],
.ll-chip[data-style="outlined"]:not([data-state="disabled"]):active { background: var(--bg); }

/* ===== ACTIVE (selected) — brand ring, all colors, no layout shift ===== */
.ll-chip[data-state="active"] { box-shadow: inset 0 0 0 2px var(--ll-chip-active-ring); }
.ll-chip[data-style="outlined"][data-state="active"] { border-color: var(--ll-chip-active-ring); box-shadow: none; }

/* ===== DISABLED (White color in file; applies to any) ===== */
.ll-chip[data-state="disabled"] { color: var(--ll-chip-disabled-text); cursor: not-allowed; }
.ll-chip[data-style="filled"][data-state="disabled"]   { background: var(--ll-chip-disabled-bg); border-color: transparent; }
.ll-chip[data-style="outlined"][data-state="disabled"] { background: transparent; border: 1px solid var(--ll-chip-disabled-bg); }
.ll-chip[data-state="disabled"] .ll-chip__close { pointer-events: none; cursor: not-allowed; }