/* Selection List Item — LittleLives design system
   8 types × 4 interaction states × 2 selection states.
   Tokens follow /tokens/semantics.web.json — surface, content, stroke.
   Variants:
     - standard      (icon + avatar + label/desc, single-select context)
     - multi-select  (avatar + label/desc + checkbox)
     - section-title (caret + label + checkbox; bold 14)
     - select-all    (link-style text right-aligned)
     - search        (rounded search input)
     - divider       (1px horizontal rule)
*/

:root {
  --color-white:                #ffffff;
  --color-neutral-25:           #f5f5f5;
  --color-neutral-50:           #f0f0f0;
  --color-neutral-100:          #e6e6e6;
  --color-neutral-300:          #bbbbbb;
  --color-neutral-600:          #8b8b8b;
  --color-neutral-800:          #545454;
  --color-neutral-950:          #333333;
  --color-brand-50:             #e6f8fd;
  --color-brand-100:            #cdf4ff;
  --color-brand-500:            #00b8ec;
  --color-brand-800:            #005b82;

  --surface-default-white:      var(--color-white);
  --surface-hover-white:        var(--color-neutral-25);
  --surface-default-brand-soft: var(--color-brand-50);
  --surface-hover-brand-soft:   var(--color-brand-100);
  --surface-disabled:           var(--color-neutral-50);

  --content-neutral-primary:    var(--color-neutral-950);
  --content-neutral-secondary:  var(--color-neutral-800);
  --content-neutral-tertiary:   var(--color-neutral-600);
  --content-disabled:           var(--color-neutral-300);
  --content-brand-strong:       var(--color-brand-800);

  --stroke-brand:               var(--color-brand-500);
  --stroke-soft-primary:        var(--color-neutral-300);
  --stroke-soft-secondary:      var(--color-neutral-100);
}

/* ---------- Base wrapper ---------- */
.ll-sli {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 256px;
  padding: 8px 16px;
  gap: 8px;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  background: var(--surface-default-white);
  color: var(--content-neutral-primary);
  cursor: pointer;
  user-select: none;
  border: 0;
  text-align: left;
  outline: none;
  transition: background 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

/* Focus ring drawn as inset 1.5px brand stroke (matches Figma stroke align inside) */
.ll-sli:focus-visible,
.ll-sli[data-state="focused"] {
  box-shadow: inset 0 0 0 1.5px var(--stroke-brand);
}

/* ---------- Interaction states (Selection=Off) ---------- */
.ll-sli:hover,
.ll-sli[data-state="hovered"] {
  background: var(--surface-hover-white);
}

/* ---------- Selection=On ---------- */
.ll-sli[data-selected="true"] {
  background: var(--surface-default-brand-soft);
}
.ll-sli[data-selected="true"]:hover,
.ll-sli[data-selected="true"][data-state="hovered"] {
  background: var(--surface-hover-brand-soft);
}
.ll-sli[data-selected="true"][data-state="focused"],
.ll-sli[data-selected="true"]:focus-visible {
  background: var(--surface-default-brand-soft);
  box-shadow: inset 0 0 0 1.5px var(--stroke-brand);
}

/* ---------- Disabled ---------- */
.ll-sli[data-state="disabled"],
.ll-sli[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
  background: var(--surface-default-white);
}
.ll-sli[data-state="disabled"][data-selected="true"] {
  background: var(--surface-default-brand-soft);
}
.ll-sli[data-state="disabled"] .ll-sli__label,
.ll-sli[data-state="disabled"] .ll-sli__desc {
  color: var(--content-disabled);
}
.ll-sli[data-state="disabled"] .ll-sli__circle,
.ll-sli[data-state="disabled"] .ll-sli__caret {
  color: var(--content-disabled);
}

/* ---------- Sub-level indentation (24px slot) ---------- */
.ll-sli__indent {
  display: inline-block;
  flex: 0 0 24px;
  width: 24px;
  height: 1px;
}

/* ---------- Leading icon slot (24×24) ---------- */
.ll-sli__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--content-neutral-secondary);
}
.ll-sli__circle svg { width: 100%; height: 100%; display: block; }

/* ---------- Avatar (32×32) ---------- */
.ll-sli__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--color-brand-500);
  color: var(--color-white);
  overflow: hidden;
}
.ll-sli__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Text frame (label + desc) ---------- */
.ll-sli__frame {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.ll-sli__label {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--content-neutral-primary);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ll-sli__desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--content-neutral-secondary);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Checkbox slot (right-aligned 24px) ---------- */
.ll-sli__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

/* =====================================================================
   Type variants
   ===================================================================== */

/* ---------- Standard / Multi-select share base 63px height (auto) ---------- */
.ll-sli[data-type="standard"],
.ll-sli[data-type="multi-select"] {
  min-height: 63px;
}

/* Variants without descriptions collapse to 48px (Figma show-description=false).
   Frame stays column so the label fills horizontally and text-align: left wins. */
.ll-sli[data-type="standard"][data-no-desc],
.ll-sli[data-type="multi-select"][data-no-desc] {
  min-height: 48px;
}
.ll-sli[data-no-desc] .ll-sli__desc { display: none; }

/* ---------- Section Title ---------- */
.ll-sli[data-type="section-title"] {
  height: 40px;
  min-height: 40px;
  padding: 8px 16px;
  gap: 10px;
}
.ll-sli[data-type="section-title"] .ll-sli__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--content-neutral-secondary);
  transition: transform 150ms ease;
}
.ll-sli[data-type="section-title"] .ll-sli__caret svg { width: 100%; height: 100%; display: block; }
.ll-sli[data-type="section-title"][data-collapsed="true"] .ll-sli__caret { transform: rotate(180deg); }
.ll-sli[data-type="section-title"] .ll-sli__label {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--content-neutral-secondary);
}
.ll-sli[data-type="section-title"]:hover .ll-sli__label,
.ll-sli[data-type="section-title"][data-state="hovered"] .ll-sli__label {
  color: var(--content-neutral-primary);
}
.ll-sli[data-type="section-title"][data-selected="true"]:hover .ll-sli__label,
.ll-sli[data-type="section-title"][data-selected="true"][data-state="hovered"] .ll-sli__label {
  color: var(--content-neutral-primary);
}
.ll-sli[data-type="section-title"][data-state="disabled"] .ll-sli__caret,
.ll-sli[data-type="section-title"][data-state="disabled"] .ll-sli__label {
  color: var(--content-disabled);
}

/* ---------- Select / Deselect All ---------- */
.ll-sli[data-type="select-all"] {
  height: 32px;
  min-height: 32px;
  padding: 4px 16px;
  gap: 10px;
  justify-content: flex-end;
  cursor: pointer;
}
.ll-sli[data-type="select-all"] .ll-sli__link {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--content-brand-strong);
  text-align: right;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ll-sli[data-type="select-all"][data-state="disabled"] .ll-sli__link {
  color: var(--content-disabled);
  text-decoration-color: var(--content-disabled);
}

/* ---------- Search bar item ---------- */
.ll-sli[data-type="search"] {
  height: 48px;
  min-height: 48px;
  padding: 8px 16px;
  gap: 10px;
}
.ll-sli__search {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 8px;
  height: 32px;
  padding: 0 8px;
  border-radius: 20px;
  background: var(--surface-default-white);
  box-shadow: inset 0 0 0 1.5px var(--stroke-soft-primary);
  color: var(--content-neutral-secondary);
  transition: background 120ms ease, box-shadow 120ms ease, color 120ms ease;
}
.ll-sli__search-icon {
  display: inline-flex;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--content-neutral-secondary);
}
.ll-sli__search-icon svg { width: 100%; height: 100%; display: block; }
.ll-sli__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--content-neutral-primary);
}
.ll-sli__search-input::placeholder { color: var(--content-neutral-secondary); }
.ll-sli[data-type="search"][data-state="hovered"] .ll-sli__search,
.ll-sli[data-type="search"]:hover .ll-sli__search {
  background: var(--surface-hover-white);
}
.ll-sli[data-type="search"][data-state="focused"] .ll-sli__search,
.ll-sli[data-type="search"]:focus-within .ll-sli__search {
  box-shadow: inset 0 0 0 1.5px var(--stroke-brand);
}
.ll-sli[data-type="search"][data-state="focused"] .ll-sli__search-icon,
.ll-sli[data-type="search"]:focus-within .ll-sli__search-icon {
  color: var(--content-brand-strong);
}
.ll-sli[data-type="search"][data-state="disabled"] .ll-sli__search,
.ll-sli[data-type="search"][aria-disabled="true"] .ll-sli__search {
  color: var(--content-disabled);
  background: var(--surface-default-white);
  box-shadow: inset 0 0 0 1.5px var(--stroke-soft-secondary);
}
.ll-sli[data-type="search"][data-state="disabled"] .ll-sli__search-icon,
.ll-sli[data-type="search"][data-state="disabled"] .ll-sli__search-input::placeholder {
  color: var(--content-disabled);
}
.ll-sli__search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  color: var(--content-neutral-secondary);
}
.ll-sli__search-clear svg { width: 100%; height: 100%; display: block; }
.ll-sli[data-type="search"]:not(:focus-within) .ll-sli__search-clear { display: none; }
.ll-sli[data-type="search"]:focus-within .ll-sli__search-input:placeholder-shown ~ .ll-sli__search-clear {
  display: none;
}
/* Selection-on background only on outer wrapper, not the input pill */
.ll-sli[data-type="search"]:hover { background: transparent; }
.ll-sli[data-type="search"]:focus-within { background: transparent; }

/* ---------- Divider ---------- */
.ll-sli[data-type="divider"] {
  height: 8px;
  min-height: 8px;
  padding: 0 16px;
  gap: 0;
  cursor: default;
  align-items: center;
  justify-content: center;
}
.ll-sli[data-type="divider"]:hover { background: var(--surface-default-white); }
.ll-sli[data-type="divider"][data-selected="true"] { background: var(--surface-default-brand-soft); }
.ll-sli[data-type="divider"][data-selected="true"]:hover { background: var(--surface-default-brand-soft); }
.ll-sli__line {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--stroke-soft-secondary);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ll-sli,
  .ll-sli__caret,
  .ll-sli__search { transition: none !important; }
}