/*
 * Interruttore (Switch.jsx dell'oracolo). Nessun equivalente nativo in
 * WordPress/WooCommerce — qui si stila un vero <input type="checkbox">
 * (appearance:none, traccia+pomello disegnati via ::before) invece della
 * coppia <span role="switch"> + tastiera gestita a mano dell'oracolo: stessa
 * resa visiva, ma accessibilità nativa del browser (nessun JS necessario per
 * checked/focus/tastiera). Markup: <label class="fm-switch-field">
 * <input type="checkbox" class="fm-switch"> Testo</label>.
 *
 * --ink-200 (fuori-stato) e le due ombre sono nell'oracolo valori letterali,
 * non alias — copiati fedelmente, non sostituiti con un alias tema-scuro
 * inventato da noi (vedi STATO.md: nota per Alessandro, --ink-200 non si
 * flippa sotto .theme-dark, possibile lacuna del DS stesso, non nostra).
 */

.fm-switch-field {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--custom--switch-label-gap);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--custom--text-body);
}

.fm-switch-field:has(.fm-switch:disabled) {
	cursor: not-allowed;
	opacity: var(--wp--custom--switch-opacity-disabled);
}

.fm-switch {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	margin: 0;
	flex: 0 0 auto;
	width: var(--wp--custom--switch--w--md);
	height: var(--wp--custom--switch--h--md);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--ink-200);
	box-shadow: var(--wp--custom--switch-off-shadow);
	cursor: pointer;
	transition:
		background var(--wp--custom--dur--base) var(--wp--custom--ease--out),
		box-shadow var(--wp--custom--dur--base) var(--wp--custom--ease--out);
}

.fm-switch::before {
	content: "";
	position: absolute;
	top: calc((var(--wp--custom--switch--h--md) - var(--wp--custom--switch--knob--md)) / 2);
	left: calc((var(--wp--custom--switch--h--md) - var(--wp--custom--switch--knob--md)) / 2);
	width: var(--wp--custom--switch--knob--md);
	height: var(--wp--custom--switch--knob--md);
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--wp--custom--switch-knob-shadow);
	transition: left var(--wp--custom--dur--base) var(--wp--custom--ease--snap);
}

.fm-switch:checked {
	background: var(--wp--preset--gradient--flash);
	box-shadow: var(--wp--custom--glow--flash);
}

.fm-switch:checked::before {
	left: calc(var(--wp--custom--switch--w--md) - var(--wp--custom--switch--knob--md) - ((var(--wp--custom--switch--h--md) - var(--wp--custom--switch--knob--md)) / 2));
}

.fm-switch:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--ring-focus);
}

.fm-switch:disabled {
	cursor: not-allowed;
}

/* Dimensione sm — classe sul checkbox stesso: .fm-switch.is-size-sm */
.fm-switch.is-size-sm {
	width: var(--wp--custom--switch--w--sm);
	height: var(--wp--custom--switch--h--sm);
}
.fm-switch.is-size-sm::before {
	top: calc((var(--wp--custom--switch--h--sm) - var(--wp--custom--switch--knob--sm)) / 2);
	left: calc((var(--wp--custom--switch--h--sm) - var(--wp--custom--switch--knob--sm)) / 2);
	width: var(--wp--custom--switch--knob--sm);
	height: var(--wp--custom--switch--knob--sm);
}
.fm-switch.is-size-sm:checked::before {
	left: calc(var(--wp--custom--switch--w--sm) - var(--wp--custom--switch--knob--sm) - ((var(--wp--custom--switch--h--sm) - var(--wp--custom--switch--knob--sm)) / 2));
}