/* Checkbox — LittleLives design system
   Visuals are sourced from the Figma SVG masters living one folder up:
     ../Selection={Off,On,Partial}, State={Default,Hovered,Focused,Disabled}.svg
   The native <input type="checkbox"> drives semantics; the visual box swaps
   background-image based on :checked / :indeterminate / :hover / :disabled.
   Focus ring is rendered via box-shadow so the box does not shift size.
*/

:root {
  --color-white:        #ffffff;
  --color-neutral-100:  #e6e6e6;
  --color-neutral-300:  #bbbbbb;
  --color-neutral-600:  #8b8b8b;
  --color-neutral-950:  #333333;
  --color-brand-500:    #00b8ec;
  --color-brand-800:    #005b82;

  --content-neutral-primary:    var(--color-neutral-950);
  --content-neutral-tertiary:   var(--color-neutral-600);
  --stroke-brand:               var(--color-brand-500);
}

/* ---------- Wrapper (label) ---------- */
.ll-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--content-neutral-primary);
  cursor: pointer;
  user-select: none;
}
.ll-checkbox[data-disabled="true"] {
  cursor: not-allowed;
  color: var(--content-neutral-tertiary);
}

/* ---------- Native input is visually hidden but kept accessible ---------- */
.ll-checkbox__input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  border: 0; clip: rect(0 0 0 0);
  overflow: hidden; white-space: nowrap;
}

/* ---------- Visual box ----------
   Box is 20x20 (the visible square). The SVG asset is 24x24 with 2px
   transparent padding inside its viewBox. Render the SVG at 24x24 and
   offset -2px so the visible 20x20 portion aligns with the box element.
   Focus ring is drawn as box-shadow on the 20x20 element so the layout
   does not shift. */
.ll-checkbox__box {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 4px;
  background-repeat: no-repeat;
  background-position: -2px -2px;
  background-size: 24px 24px;
  background-image: url("../Selection=Off, State=Default.svg");
  transition: box-shadow 120ms ease;
}

.ll-checkbox:hover .ll-checkbox__input:not(:disabled) + .ll-checkbox__box {
  background-image: url("../Selection=Off, State=Hovered.svg");
}

.ll-checkbox__input:focus-visible + .ll-checkbox__box {
  box-shadow: 0 0 0 3px var(--stroke-brand);
}

.ll-checkbox__input:disabled + .ll-checkbox__box {
  background-image: url("../Selection=Off, State=Disabled.svg");
  cursor: not-allowed;
}

/* ---------- Checked ---------- */
.ll-checkbox__input:checked + .ll-checkbox__box {
  background-image: url("../Selection=On, State=Default.svg");
}
.ll-checkbox:hover .ll-checkbox__input:checked:not(:disabled) + .ll-checkbox__box {
  background-image: url("../Selection=On, State=Hovered.svg");
}
.ll-checkbox__input:checked:disabled + .ll-checkbox__box {
  background-image: url("../Selection=On, State=Disabled.svg");
}

/* ---------- Indeterminate ---------- */
.ll-checkbox__input:indeterminate + .ll-checkbox__box {
  background-image: url("../Selection=Partial, State=Default.svg");
}
.ll-checkbox:hover .ll-checkbox__input:indeterminate:not(:disabled) + .ll-checkbox__box {
  background-image: url("../Selection=Partial, State=Hovered.svg");
}
.ll-checkbox__input:indeterminate:disabled + .ll-checkbox__box {
  background-image: url("../Selection=Partial, State=Disabled.svg");
}

/* ---------- Forced state demo helpers (used by storybook to render hover /
              focus columns without real interaction) ---------- */
.ll-checkbox.force-hover .ll-checkbox__input + .ll-checkbox__box {
  background-image: url("../Selection=Off, State=Hovered.svg");
}
.ll-checkbox.force-hover .ll-checkbox__input:checked + .ll-checkbox__box {
  background-image: url("../Selection=On, State=Hovered.svg");
}
.ll-checkbox.force-hover .ll-checkbox__input:indeterminate + .ll-checkbox__box {
  background-image: url("../Selection=Partial, State=Hovered.svg");
}
.ll-checkbox.force-focus .ll-checkbox__box {
  box-shadow: 0 0 0 3px var(--stroke-brand);
}

/* ---------- Label text ---------- */
.ll-checkbox__label:empty { display: none; }

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