/**
 * Checkbox: .mk-checkbox (templates/components/checkbox.php).
 *
 * A native input with appearance: none keeps keyboard, form and screen
 * reader behaviour. States only switch the local --mk-checkbox-* properties.
 * The check mark (assets/icons/check.svg) is a mask on ::before that scales
 * in with a slight overshoot and is revealed from left to right.
 */

.mk-checkbox__field {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--wp--custom--control--gap);
	cursor: pointer;
}

.mk-checkbox__input {
	--mk-checkbox-border: var(--wp--custom--color--control--border);
	--mk-checkbox-bg: var(--wp--custom--color--control--background);

	position: relative;
	flex: none;
	box-sizing: border-box;
	inline-size: var(--wp--custom--checkbox--size);
	block-size: var(--wp--custom--checkbox--size);

	/* Centre the box on the first line of the label. */
	margin: calc((1lh - var(--wp--custom--checkbox--size)) / 2) 0 0;
	border-width: var(--wp--custom--control--border-width);
	border-style: solid;
	border-color: var(--mk-checkbox-border);
	border-radius: var(--wp--custom--checkbox--radius);
	background-color: var(--mk-checkbox-bg);
	font: inherit;
	cursor: inherit;
	appearance: none;
	transition-property: background-color, border-color;
	transition-duration: var(--wp--custom--motion--duration--base);
	transition-timing-function: var(--wp--custom--motion--easing--standard);
}

.mk-checkbox__input::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--custom--color--control--icon);
	mask-image: url(../../icons/check.svg);
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	opacity: 0;
	transform: scale(0.4);
	clip-path: inset(0 100% 0 0);
	transition-property: opacity, transform, clip-path;
	transition-duration: var(--wp--custom--motion--duration--fast);
	transition-timing-function: var(--wp--custom--motion--easing--standard);
}

.mk-checkbox__input:checked {
	--mk-checkbox-border: var(--wp--custom--color--control--checked);
	--mk-checkbox-bg: var(--wp--custom--color--control--checked);
}

.mk-checkbox__input:checked::before {
	opacity: 1;
	transform: none;
	clip-path: inset(0);
	transition-duration: var(--wp--custom--motion--duration--base);
	transition-timing-function: var(--wp--custom--motion--easing--emphasized);
}

.mk-checkbox__input:focus-visible {
	outline-width: var(--wp--custom--focus--ring-width);
	outline-style: solid;
	outline-color: var(--wp--custom--color--focus--ring);
	outline-offset: var(--wp--custom--focus--ring-offset);
}

@media (hover: hover) {
	/* The whole label is the hit area, so hovering the text highlights the box. */
	.mk-checkbox__field:hover
		.mk-checkbox__input:not(:disabled, [aria-invalid="true"]) {
		--mk-checkbox-border: var(--wp--custom--color--control--border-hover);
	}

	.mk-checkbox__field:hover .mk-checkbox__input:checked:not(:disabled) {
		--mk-checkbox-bg: var(--wp--custom--color--control--checked-hover);
	}
}

.mk-checkbox__input[aria-invalid="true"] {
	--mk-checkbox-border: var(--wp--custom--color--control--border-error);
}

.mk-checkbox__input:disabled {
	--mk-checkbox-border: var(--wp--custom--color--control--disabled);
}

.mk-checkbox__input:checked:disabled {
	--mk-checkbox-bg: var(--wp--custom--color--control--disabled);
}

.mk-checkbox__field:has(:disabled) {
	cursor: not-allowed;
}

.mk-checkbox__error {
	margin: var(--wp--custom--control--message-gap) 0 0;
	padding-inline-start: calc(
		var(--wp--custom--checkbox--size) + var(--wp--custom--control--gap)
	);
	color: var(--wp--custom--color--text--error);
	font-family: var(--wp--custom--text--body-small--font-family);
	font-size: var(--wp--custom--text--body-small--font-size);
	font-weight: var(--wp--custom--text--body-small--font-weight);
	line-height: var(--wp--custom--text--body-small--line-height);
	letter-spacing: var(--wp--custom--text--body-small--letter-spacing);
}

/* List variant: one option of a filter list, the whole row is the hit area. */
.mk-checkbox--list .mk-checkbox__field {
	display: flex;
	gap: var(--wp--custom--checkbox--list--gap);
	padding-block: var(--wp--custom--checkbox--list--padding-block);
	padding-inline: var(--wp--custom--checkbox--list--padding-inline);
	font-family: var(--wp--custom--text--body-medium--font-family);
	font-size: var(--wp--custom--text--body-medium--font-size);
	font-weight: var(--wp--custom--text--body-medium--font-weight);
	line-height: var(--wp--custom--text--body-medium--line-height);
	letter-spacing: var(--wp--custom--text--body-medium--letter-spacing);
}

.mk-checkbox--list .mk-checkbox__error {
	--mk-checkbox-gap: var(--wp--custom--checkbox--list--gap);

	margin-inline-start: var(--wp--custom--checkbox--list--padding-inline);
	padding-inline-start: calc(
		var(--wp--custom--checkbox--size) + var(--mk-checkbox-gap)
	);
}

@media (prefers-reduced-motion: reduce) {
	.mk-checkbox__input,
	.mk-checkbox__input::before {
		transition: none;
	}
}