@mixin checked {
	~ .switchField-icon {
		background-color: var(--palettes-product-700);
		border-color: var(--palettes-product-700);

		&::before {
			inset-inline-start: 50%;
		}
	}

	&:hover {
		~ .switchField-icon {
			background-color: var(--palettes-product-800);
			border-color: var(--palettes-product-800);
		}
	}

	&:active {
		~ .switchField-icon {
			background-color: var(--palettes-product-900);
			border-color: var(--palettes-product-900);
		}
	}
}

@mixin disabled {
	~ .switchField-icon {
		background-color: var(--commons-disabled-background);
		border-color: var(--commons-disabled-background);
		color: var(--palettes-neutral-600); // disabled token candidate

		&::before {
			background-color: var(--palettes-neutral-500); // disabled token candidate
		}
	}
}

@mixin checkedDisabled {
	&:disabled {
		~ .switchField-icon {
			background-color: var(--commons-disabled-background);
			border-color: var(--commons-disabled-background);
			color: var(--palettes-neutral-600); // disabled token candidate

			&::before {
				background-color: var(--palettes-neutral-500); // disabled token candidate
			}
		}
	}
}

@mixin invalid {
	~ .switchField-icon {
		background-color: var(--palettes-error-700);
		border-color: var(--palettes-error-700);
	}

	&:hover {
		~ .switchField-icon {
			background-color: var(--palettes-error-800);
			border-color: var(--palettes-error-800);
		}
	}

	&:active {
		~ .switchField-icon {
			background-color: var(--palettes-error-900);
			border-color: var(--palettes-error-900);
		}
	}
}

@mixin checkedInvalid {
	&:checked {
		~ .switchField-icon {
			background-color: var(--palettes-error-700);
			border-color: var(--palettes-error-700);
		}
	}
}