/*
 * Checkboxes and radio buttons, drawn the same way on every screen (plugin pages, WordPress' own
 * screens, the login form). The fill follows the organization's primary colour: AdminTheme's
 * branding CSS sets --cfp-petrol (and --cfp-petrol-soft) from it; the fallbacks are the defaults.
 */
:root {
	--cfc-accent: var(--cfp-petrol, #0f4c5c);
	--cfc-ring: var(--cfp-petrol-soft, rgba(15, 76, 92, .14));
	--cfc-border: #c9bfa9;
	--cfc-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* "html body" outranks WordPress' forms.css (input[type=checkbox]:checked::before…). */
html body input[type=checkbox],
html body input[type=radio] {
	-webkit-appearance: none; appearance: none;
	display: inline-grid; place-content: center; flex: none;
	width: 18px; height: 18px; min-width: 18px; margin: 0 0 0 6px; padding: 0;
	border: 1.5px solid var(--cfc-border); border-radius: 5px; background: #fff;
	box-shadow: none; vertical-align: middle; cursor: pointer;
	transition: background-color .15s, border-color .15s, box-shadow .15s;
}
html body input[type=radio] { border-radius: 50%; }

html body input[type=checkbox]:hover,
html body input[type=radio]:hover { border-color: var(--cfc-accent); }

html body input[type=checkbox]:focus-visible,
html body input[type=radio]:focus-visible,
html body input[type=checkbox]:focus,
html body input[type=radio]:focus { outline: none; border-color: var(--cfc-accent); box-shadow: 0 0 0 3px var(--cfc-ring); }

html body input[type=checkbox]:checked,
html body input[type=checkbox]:indeterminate { border-color: var(--cfc-accent); background: var(--cfc-accent); }
html body input[type=radio]:checked { border-color: var(--cfc-accent); background: #fff; }

/* Reset core's ::before (an SVG tick or a dot, floated, sized in em) and draw our own. */
html body input[type=checkbox]::before,
html body input[type=radio]::before {
	content: ""; float: none; display: block; margin: 0; width: 0; height: 0;
	background: none; border-radius: 0; text-indent: 0; filter: none;
}
html body input[type=checkbox]:checked::before {
	width: 12px; height: 12px; background: #fff;
	-webkit-mask: var(--cfc-tick) center / contain no-repeat; mask: var(--cfc-tick) center / contain no-repeat;
}
html body input[type=checkbox]:indeterminate::before { width: 9px; height: 2px; border-radius: 2px; background: #fff; }
html body input[type=radio]:checked::before { width: 8px; height: 8px; border-radius: 50%; background: var(--cfc-accent); }

html body input[type=checkbox]:disabled,
html body input[type=radio]:disabled { cursor: not-allowed; opacity: .5; }

/* RTL: the gap goes on the side facing the label. */
html[dir=ltr] body input[type=checkbox],
html[dir=ltr] body input[type=radio] { margin: 0 6px 0 0; }

/* Inside table cells and other controls that centre them, no gap at all. */
html body .check-column input[type=checkbox],
html body .cfp-signers__cell input { margin: 0; }