/* Checkbox component
 * Figma node: 2043:2985 — "Checkbox"
 * States: Initial, Checked, Disabled
 *
 * Ported from figmaTest src/components/Checkbox/Checkbox.css for the CC Login
 * rebuild (TASK-403384). First consumer is the Remember Me control on
 * /control/login. Kept verbatim apart from the notes below so it stays diffable
 * against the design source.
 */

/* ── Outer wrapper ──────────────────────────────────── */

.checkbox {
  display: flex;
  gap: var(--ao-spacing-3);               /* 8px */
  align-items: flex-start;
  cursor: pointer;
}

/* ── Hidden native input ────────────────────────────── */

.checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* ── Visual indicator ───────────────────────────────── */

.checkbox__indicator {
  width: 16px;
  height: 16px;
  border-radius: var(--ao-radius-sm);     /* 4px — rounded square */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ao-surface-primary);
  border: 1px solid var(--ao-border-secondary);
  transition: border-color var(--ao-transition-default),
              background var(--ao-transition-default);
}

/* ── Check icon (hidden by default) ─────────────────── */
/* Affino renders Lucide icons as inline SVG via the icon library rather than
 * with a [data-lucide] placeholder, so the selector matches both. */

.checkbox__indicator [data-lucide],
.checkbox__indicator > svg {
  width: 14px;
  height: 14px;
  color: var(--ao-text-invert);
  display: none;
}

/* ── Checked state ──────────────────────────────────── */

.checkbox__input:checked + .checkbox__indicator {
  background: var(--ao-surface-brand);
  border-color: var(--ao-border-brand);
}

.checkbox__input:checked + .checkbox__indicator [data-lucide],
.checkbox__input:checked + .checkbox__indicator > svg {
  display: block;
}

/* ── Disabled state ─────────────────────────────────── */

.checkbox__input:disabled {
  cursor: not-allowed;
}

.checkbox__input:disabled ~ * {
  opacity: 0.5;
  cursor: not-allowed;
}

.checkbox:has(.checkbox__input:disabled) {
  cursor: not-allowed;
}

/* ── Focus ring ─────────────────────────────────────── */

.checkbox__input:focus-visible + .checkbox__indicator {
  box-shadow: 0 0 0 1px var(--ao-surface-primary),
              0 0 0 3px var(--ao-surface-brand-soft);
  outline: none;
}

/* ── Label wrapper ──────────────────────────────────── */

.checkbox__label {
  display: flex;
  flex-direction: column;
  gap: var(--ao-spacing-1);               /* 4px */
}

/* ── Label text ─────────────────────────────────────── */

.checkbox__label-text {
  font-family: var(--ao-font-title);
  font-weight: var(--ao-font-medium);
  font-size: var(--ao-font-fixed-xs);     /* 14px */
  line-height: var(--ao-leading-xs);       /* 16px */
  color: var(--ao-text-primary);
  margin: 0;
}

/* ── Helper text ────────────────────────────────────── */

.checkbox__helper {
  font-family: var(--ao-font-title);
  font-weight: var(--ao-font-regular);
  font-size: var(--ao-font-fixed-xxs);    /* 12px */
  line-height: var(--ao-leading-xs);       /* 16px */
  color: var(--ao-text-contrast);
  margin: 0;
}