/* custom_checkbox.css
 * Datum: za 03-01-2026  v1.1
 *
 * Styling voor input[type="checkbox"] en input[type="radio"]
 */

/* =========================================================
   Basis (checkbox + radio)
   ========================================================= */

body {
	--secondarycolor:currentColor;
}
input:is([type="checkbox"],[type="radio"]) {
	-webkit-appearance:none;
	appearance:none;

	width:18px;
	height:18px;
	margin:0;

	border:2px solid var(--secondarycolor, #be5915);
	background-color:#fff;

	display:inline-block;
	vertical-align:middle;

	cursor:pointer;
	position:relative;
}

/* checkbox radius */
input[type="checkbox"]{
	border-radius:4px;
}

/* radio radius */
input[type="radio"]{
	border-radius:50%;
}

/* hover */
input:is([type="checkbox"],[type="radio"]):hover{
	background-color: color-mix(in srgb, var(--secondarycolor, #be5915) 8%, white);
}

/* checked basis */
input:is([type="checkbox"],[type="radio"]):checked{
	background-color: var(--secondarycolor, #be5915);
	border-color: var(--secondarycolor, #be5915);
}

/* =========================================================
   CHECKBOX SPECIFIEK
   ========================================================= */

/* vinkje */
input[type="checkbox"]:checked::after{
	content:'';
	position:absolute;
	left:4px;
	top:1px;
	width:5px;
	height:9px;
	border: solid #fff;
	border-width:0 2px 2px 0;
	transform: rotate(45deg);
}

/* indeterminate */
input[type="checkbox"]:indeterminate{
	background-color: color-mix(in srgb, var(--secondarycolor, #be5915) 70%, white);
	border-color: var(--secondarycolor, #be5915);
}

input[type="checkbox"]:indeterminate::after{
	content:'';
	position:absolute;
	left:3px;
	top:7px;
	width:8px;
	height:2px;
	background-color:#fff;
}

/* =========================================================
   RADIO SPECIFIEK
   ========================================================= */

/* bolletje */
input[type="radio"]:checked::after{
	content:'';
	position:absolute;
	inset:4px;
	background:#fff;
	border-radius:50%;
}

/* =========================================================
   Focus + disabled (gedeeld)
   ========================================================= */
input:is([type="checkbox"],[type="radio"]):focus-visible{
	outline:2px solid color-mix(in srgb, var(--secondarycolor, #be5915) 55%, white);
	outline-offset:2px;
}

input:is([type="checkbox"],[type="radio"]):disabled{
	opacity:.4;
	cursor:not-allowed;
}

label[for]:has(input[type="checkbox"]) {
	user-select: none;
	display: flex!important;
	flex-direction:row;
	gap:5px;
}