/**
 * Postomatic - Canonical checkbox & radio rendering.
 *
 * Single source of truth for the plugin's custom checkbox/radio controls.
 *
 * Why this file exists:
 * The plugin previously styled `.checkbox-item input[type="checkbox"]` in three
 * separate stylesheets (admin, enhanced, subscription) which each loaded on a
 * different admin page. Those copies drifted apart: some applied
 * `appearance: none` (removing the browser's native tick) without drawing a
 * replacement, and one drew the tick with a `::after` pseudo-element, which
 * Firefox does not render on form controls. The result was a checkbox that
 * showed only a coloured box plus a focus ring when checked, with no tick.
 *
 * The approach here is deterministic across browsers and WordPress versions:
 * we take full control of the control's appearance (`appearance: none`),
 * explicitly neutralise any indicator WordPress core draws via
 * `::before` / `::after`, and paint our own indicator as a `background-image`
 * on the input itself. `background-image` is honoured on replaced elements in
 * every supported browser, unlike generated content.
 *
 * @package Postomatic
 */

/* -------------------------------------------------------------------------
 * Base (unchecked) control
 * ---------------------------------------------------------------------- */

.checkbox-item input[type="checkbox"],
.checkbox-item input[type="radio"],
.checkbox-grid input[type="checkbox"],
.radio-option input[type="radio"],
.auto-select-checkbox input[type="checkbox"] {
	/* Take over rendering so behaviour is identical in every browser. */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	/* Fixed box that cannot be collapsed by flex/grid parents. */
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	min-width: 18px;
	flex: 0 0 auto;
	padding: 0;
	margin: 0 12px 0 0;
	vertical-align: middle;

	border: 2px solid #d1d5db;
	border-radius: 4px;
	background-color: #fff;

	/* The indicator is painted here, centred and never tiled. */
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	background-image: none;

	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Radios are circular. */
.checkbox-item input[type="radio"],
.radio-option input[type="radio"] {
	border-radius: 50%;
}

/*
 * Neutralise indicators drawn by WordPress core admin styles (and by older
 * versions of this plugin's own CSS). Without this, core's dashicon/SVG tick
 * can sit underneath ours, or render clipped inside our resized box.
 */
.checkbox-item input[type="checkbox"]::before,
.checkbox-item input[type="checkbox"]::after,
.checkbox-item input[type="radio"]::before,
.checkbox-item input[type="radio"]::after,
.checkbox-grid input[type="checkbox"]::before,
.checkbox-grid input[type="checkbox"]::after,
.radio-option input[type="radio"]::before,
.radio-option input[type="radio"]::after,
.auto-select-checkbox input[type="checkbox"]::before,
.auto-select-checkbox input[type="checkbox"]::after {
	content: none;
	display: none;
}

/* -------------------------------------------------------------------------
 * Checked state
 * ---------------------------------------------------------------------- */

.checkbox-item input[type="checkbox"]:checked,
.checkbox-grid input[type="checkbox"]:checked,
.auto-select-checkbox input[type="checkbox"]:checked {
	background-color: #3b82f6;
	border-color: #3b82f6;
	/* White tick, drawn edge-to-edge inside the box. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-7.5'/%3E%3C/svg%3E");
}

.checkbox-item input[type="radio"]:checked,
.radio-option input[type="radio"]:checked {
	background-color: #3b82f6;
	border-color: #3b82f6;
	/* Solid white centre dot. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='4.25' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* Mixed / "select all" state. */
.checkbox-item input[type="checkbox"]:indeterminate,
.checkbox-grid input[type="checkbox"]:indeterminate,
.auto-select-checkbox input[type="checkbox"]:indeterminate {
	background-color: #3b82f6;
	border-color: #3b82f6;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 10h10'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
 * Interaction states
 * ---------------------------------------------------------------------- */

.checkbox-item input[type="checkbox"]:hover:not(:disabled),
.checkbox-item input[type="radio"]:hover:not(:disabled),
.checkbox-grid input[type="checkbox"]:hover:not(:disabled),
.radio-option input[type="radio"]:hover:not(:disabled),
.auto-select-checkbox input[type="checkbox"]:hover:not(:disabled) {
	border-color: #3b82f6;
}

/*
 * Focus ring is limited to `:focus-visible` (keyboard navigation). Using plain
 * `:focus` left a glow around the control after every mouse click, which read
 * as "the checkbox highlighted instead of ticking".
 */
.checkbox-item input[type="checkbox"]:focus-visible,
.checkbox-item input[type="radio"]:focus-visible,
.checkbox-grid input[type="checkbox"]:focus-visible,
.radio-option input[type="radio"]:focus-visible,
.auto-select-checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid #1d4ed8;
	outline-offset: 2px;
	box-shadow: none;
}

/* Suppress the stray ring on pointer interaction. */
.checkbox-item input[type="checkbox"]:focus:not(:focus-visible),
.checkbox-item input[type="radio"]:focus:not(:focus-visible),
.checkbox-grid input[type="checkbox"]:focus:not(:focus-visible),
.radio-option input[type="radio"]:focus:not(:focus-visible),
.auto-select-checkbox input[type="checkbox"]:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.checkbox-item input[type="checkbox"]:disabled,
.checkbox-item input[type="radio"]:disabled,
.checkbox-grid input[type="checkbox"]:disabled,
.radio-option input[type="radio"]:disabled,
.auto-select-checkbox input[type="checkbox"]:disabled {
	background-color: #f3f4f6;
	border-color: #e5e7eb;
	cursor: not-allowed;
	opacity: 0.7;
}

/* -------------------------------------------------------------------------
 * High contrast / forced colours
 * ---------------------------------------------------------------------- */

@media (forced-colors: active) {
	.checkbox-item input[type="checkbox"],
	.checkbox-item input[type="radio"],
	.checkbox-grid input[type="checkbox"],
	.radio-option input[type="radio"],
	.auto-select-checkbox input[type="checkbox"] {
		/* Hand rendering back to the OS so the state stays perceivable. */
		-webkit-appearance: auto;
		-moz-appearance: auto;
		appearance: auto;
		background-image: none;
	}
}
