/* The `Checkbox` tick: the hexagon's outline always, its core faded in by state.

   Two variables are the whole control — `--mf-checkbox-core`, the core's opacity, and
   `--mf-checkbox-stroke`, the outline's weight. A host that has its own idea of "about
   to be pressed" says so with `.is-preview` rather than setting them; the guard and the
   number stay here, where the states that outrank it are. */
.mf-checkbox {
	--mf-checkbox-core: 0;
	--mf-checkbox-stroke: 1;

	display: flex;
	align-items: center;
	gap: var(--mf-space-2);
	min-width: 0;
	color: var(--mf-color-text);
	cursor: pointer;

	&:hover:not(:has(input:checked, input:disabled)),
	&:has(input:focus-visible):not(:has(input:checked, input:disabled)),
	&.is-preview:not(:has(input:checked, input:disabled)) {
		--mf-checkbox-core: 0.4;
	}

	&:has(input:checked) {
		--mf-checkbox-core: 1;
		--mf-checkbox-stroke: 2;
	}

	&:has(input:disabled) {
		color: var(--mf-color-text-muted);
		cursor: not-allowed;
	}
}

/* The frame the invisible input is laid over, so the focus ring lands on the glyph. */
.mf-checkbox-box {
	position: relative;
	display: flex;
	flex: none;
}

/* Not `opacity: 0` — that would take the focus outline with it. `appearance: none`
   drops the platform box and leaves a real, focusable control with nothing to draw. */
.mf-checkbox-input {
	position: absolute;
	inset: 0;
	appearance: none;
	margin: 0;
	background: none;
	border: 0;
	cursor: inherit;
}

.mf-checkbox-box .mf-fill {
	opacity: var(--mf-checkbox-core);
	transition: opacity var(--mf-transition-fast);
}

/* The hexagon carries `stroke-width="3"` for the brand mark, and a presentation attribute
   loses to any declaration here — which is the only way to weight the outline by state. */
.mf-checkbox-box .mf-icon path:not(.mf-fill) {
	stroke-width: var(--mf-checkbox-stroke);
	transition: stroke-width var(--mf-transition-fast);
}

/* The glyph slot, which a host reaches to tint what it put there. */
.mf-checkbox-icon {
	display: flex;
	flex: none;
}