[type=checkbox] {
	--accent: var(--states-primary-primary, #FF007F);
	--border-width: calc(1em * (4/3) / 13.333333);
	--checkmark-size: 80%; /* Matches radio dot size */

	appearance: none;
	aspect-ratio: 1;
	box-sizing: border-box;
	position: relative;
	vertical-align: middle;
	flex-shrink: 0;

	/* Matching radio button size */
	width: 1rem;
	height: 1rem;

	/* Border & Background */
	border: var(--border-width) solid var(--border-color, rgba(48, 48, 48, 0.10));
	border-radius: var(--border-radius, 0.25rem);
	background: var(--States-primary-secondary, #FFF);

	/* Box Shadows (matching radio) */
	box-shadow:
		0px -1px 0px 0px var(--shadows-inner-1, rgba(22, 25, 29, 0.08)) inset,
		0px 1px 2px -0.5px var(--shadows-drop-2, rgba(22, 25, 29, 0.04));
}

/* Small Checkbox */
[type=checkbox].checkbox--small {
	width: 0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
}

/* Checkmark */
[type=checkbox]::after {
	content: "";
	width: var(--checkmark-size); /* Increased from 50% for better visibility */
	height: var(--checkmark-size);
	background: var(--checkmark-bg, transparent);
	position: absolute;
	inset: 0;
	margin: auto;
	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="3" stroke="%23000" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10"/></svg>') no-repeat center / contain;
	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="3" stroke="%23000" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10"/></svg>') no-repeat center / contain;
	opacity: 0;
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
	transform: scale(0.5);
}

/* Checked State */
[type=checkbox]:checked {
	background: var(--States-primary-primary, #FF007F);
	border: 1px solid var(--Border-alpha-subtle, rgba(48, 48, 48, 0.10));
	box-shadow:
		0px -1px 0px 0px var(--shadows-inner-1, rgba(22, 25, 29, 0.08)) inset,
		0px 1px 2px var(--shadows-drop-2, rgba(22, 25, 29, 0.04));
}

[type=checkbox]:checked::after {
	background: var(--checked-checkmark-bg, #FFF);
	opacity: 1;
	transform: scale(1);
}

/* Intermediate (Indeterminate) Checkbox */
[type=checkbox][indeterminate] {
	background: var(--States-primary-primary, #FF007F);
	border: 1px solid var(--Border-alpha-subtle, rgba(48, 48, 48, 0.10));
	box-shadow: 0px -1px 0px 0px var(--shadows-inner-1, rgba(22, 25, 29, 0.08)) inset, 0px 1px 2px var(--shadows-drop-2, rgba(22, 25, 29, 0.04));
}

/* Indeterminate State Checkmark */
[type=checkbox][indeterminate]::after {
	content: "";
	width: 60%;
	height: 1.5px;
	background: var(--states-primary-secondary, #FFF);
	position: absolute;
	inset: 0;
	margin: auto;
	mask: none;
	-webkit-mask: none;
	opacity: 1;
	transform: scale(1);
	border-radius: 2px;
}

/* Focus State (Matches Radio Button) */
[type=checkbox]:focus-visible {
	box-shadow:
		0px 0px 0px 1.5px var(--Background-bg-primary, #FFF),
		0px 0px 0px 3.5px var(--shadows-highlight-1, #CCE5FF);
}

/* Disabled State */
[type=checkbox]:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/* Hover States (Matches Radio Button) */
@media (hover: hover) {
	[type=checkbox]:checked:hover {
		--bg: var(--checked-bg-hover, color-mix(in srgb, var(--accent) 60%, CanvasText 40%));
	}

	[type=checkbox]:not(:checked):hover {
		--border-color: var(--border-color-hover, color-mix(in srgb, GrayText 60%, CanvasText 40%));
	}
}

/* Variants */
.checkbox--rounded {
	--border-radius: var(--Global-r-2, 0.25rem);
}

.checkbox--square {
	--border-radius: var(--Global-r-2, 0.25rem);
}