[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);
}

	.switch-wrapper {
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-content: center;
	align-items: center;
}

/* ========== Reset Base Styles ========== */
[type="checkbox"].switch {
	all: unset;
	display: inline-block;
	width: 1.75rem;
	height: 1rem;
	background: var(--background-bg-switch, #efefef);
	border-radius: var(--global-r-full, 624.9375rem);
	border-style: solid;
	border-color: var(--border-alpha-strong, rgba(48, 48, 48, 0.1));
	border-width: 0.03125rem;

	position: relative;
	box-sizing: border-box;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	appearance: none;
}

/* ========== Switch Knob (Thumb) ========== */
[type="checkbox"].switch::after {
	all: unset;
	content: "";
	position: absolute;
	top: 50%;
	left: var(--switch-padding, 2px);
	width: var(--switch-handle-size, 1rem);
	height: var(--switch-handle-size, 1rem);
	transform: translateY(-50%);
	transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
	pointer-events: none;

	background: var(--background-bg-switch-handle, #ffffff);
	border-radius: var(--global-r-full, 624.9375rem);
	flex-shrink: 0;
	width: 0.75rem;
	height: 0.75rem;
	box-shadow: var(--components-switch-handle-box-shadow,
			0rem 0rem 0.125rem 0rem rgba(22, 25, 29, 0.08),
			0rem 0.0625rem 0.125rem 0rem rgba(22, 25, 29, 0.12));
}

/* ========== Checked State ========== */
[type="checkbox"].switch:checked {
	background-color: var(--states-primary-primary, #FF007F);
	border-color: var(--border-alpha-subtle, rgba(48, 48, 48, 0.1));

}

[type="checkbox"].switch:checked::after {
	transform: translateY(-50%) translateX(calc(var(--switch-width, 1.75rem) - var(--switch-padding, 2px) * 2 - 0.75rem));
}

/* ========== Disabled State ========== */
[type="checkbox"].switch:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

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

/* ========== Hover (Optional Styling) ========== */
@media (hover: hover) {
	[type="checkbox"].switch:hover:not(:disabled) {
		background: var(--states-primary-primary-hover, #252525);
		border-color: var(--border-alpha-subtle, rgba(48, 48, 48, 0.1));

	}
}