/**
 * hx-toggles.css — Toggles SSOT
 * Checkbox, Radio, Switch
 */
.hx-checkbox,
.hx-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--hx-space-2);
  color: var(--hx-fg);
}
.hx-checkbox__input,
.hx-radio__input {
  width: 18px;
  height: 18px;
  accent-color: var(--hx-primary);
}
.hx-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--hx-space-2);
}
.hx-switch__track {
  width: 40px;
  height: 24px;
  background: var(--hx-line);
  border-radius: var(--hx-radius-full);
}
.hx-switch.is-on .hx-switch__track {
  background: var(--hx-primary);
}


/* Migrated from hx-primitives.css — Choice family (checkbox/radio/toggle) (3.04.85) */
/* ---------- Choice family ---------- */
.hx-checkbox,
.hx-radio,
.hx-radiogroup { color: var(--hx-fg); }
.hx-checkbox__box,
.hx-radio__control {
	border-color: var(--hx-fg);
	background: transparent;
}
.hx-checkbox__input:checked + .hx-checkbox__box,
.hx-radio__input:checked + .hx-radio__control::after {
	background: var(--hx-fg);
}
.hx-checkbox--error .hx-checkbox__box,
.hx-radiogroup--error .hx-radio__control { border-color: var(--hx-danger); }
.hx-checkbox--error .hx-checkbox__helper,
.hx-radiogroup__error { color: var(--hx-danger); }
.hx-checkbox__helper,
.hx-radio__helper,
.hx-radiogroup__helper { color: var(--hx-fg-muted); }


/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-switch {
  min-height: var(--hx-control-height);
  transition: none;
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-example[data-theme="dark"] .hx-switch {
  color: var(--hx-fg);
}

/* Auto-migrated from hx-primitives.css (3.04.90) */
.hx-example[data-theme="dark"] .hx-radio input {
  accent-color: var(--hx-primary);
  border-color: var(--hx-line);
}


/* 3.04.94 — 4-variant readiness (light/dark × desktop/mobile)
   Controlled by data-theme + data-hx-vp on <html>.
   All styles token-driven. Composition with other primitives encouraged. */
html[data-theme="light"][data-hx-vp="desktop"],
html[data-theme="light"][data-hx-vp="mobile"],
html[data-theme="dark"][data-hx-vp="desktop"],
html[data-theme="dark"][data-hx-vp="mobile"] {
  /* tokens flip automatically */
}


/* Migrated from helix-app.css */
.hx-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	color: var(--hx-fg);
	text-align: start;
}
.hx-checkbox__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	clip: rect(0 0 0 0);
}
.hx-checkbox__box {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border: 2px solid var(--hx-fg);
	border-radius: 4px;
	box-sizing: border-box;
	background: var(--hx-surface);
	position: relative;
}
.hx-checkbox__input:checked + .hx-checkbox__box,
.hx-app .hx-checkbox__input[data-indeterminate] + .hx-checkbox__box {
	background: var(--hx-fg);
	border-color: var(--hx-fg);
}
.hx-checkbox__input:checked + .hx-checkbox__box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 9px;
	border: solid var(--hx-on-primary);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.hx-checkbox__input[data-indeterminate] + .hx-checkbox__box::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 6px;
	width: 8px;
	height: 2px;
	background: var(--hx-surface);
	border: 0;
	transform: none;
}