.form-check label {
	font-weight: 400;
	font-size: 16px;
	line-height: 170%;
	color: var(--form-field-text-color);
}

.form-check {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	cursor: pointer;
}

	.form-check.toggle input[type=checkbox] {
		cursor: pointer;
		--checkbox-height: 1.6em;
		position: relative;
		height: var(--checkbox-height);
		width: calc(var(--checkbox-height) * 2);
		appearance: none;
		margin: 0px;
	}

		.form-check.toggle input[type=checkbox]:focus:before {
			outline: 3px solid var(--form-field-outline-color);
		}

		.form-check.toggle input[type=checkbox]:before {
			content: '';
			display: block;
			background-color: var(--form-field-text-color);
			position: absolute;
			top: 0px;
			left: 0px;
			bottom: 0px;
			right: 0px;
			border-radius: calc(var(--checkbox-height) / 2);
		}

		.form-check.toggle input[type=checkbox]:after {
			content: '';
			display: block;
			position: absolute;
			top: 0px;
			left: 0%;
			bottom: 0px;
			right: 50%;
			background-color: var(--form-field-background-color);
			border-radius: calc(var(--checkbox-height) / 2);
			transition: left 0.2s, right 0.4s;
			border: 3px solid var(--form-field-text-color);
		}

		.form-check.toggle input[type=checkbox]:checked:after {
			left: 50%;
			right: 0%;
			transition: left 0.4s, right 0.2s;
		}

		.form-check.toggle input[type=checkbox]:is([disabled]) {
			background:transparent !important;
		}

		.form-check.toggle input[type=checkbox]:is([disabled]):before {
			background-color: var(--form-field-background-color-disabled);
		}

		.form-check.toggle input[type=checkbox]:is([disabled]):after {
			border: 3px solid var(--form-field-text-color-disabled);
		}


	.form-check:not(.toggle) input[type=checkbox] {
		cursor: pointer;
		--checkbox-height: 1.6em;
		position: relative;
		height: var(--checkbox-height);
		width: var(--checkbox-height);
		appearance: none;
		margin: 0px;
		border: 1px solid var(--form-field-text-color);
		border-radius: 3px;
		color: var(--form-field-text-color);
		fill: red;
		stroke: red;
		position: relative;
		transition: background-color 0.2s;
	}

	.form-check:not(.toggle) input[type=checkbox]:focus {
		outline: 3px solid var(--form-field-outline-color);
	}


	.form-check:not(.toggle) input[type=checkbox]::after {
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		background-color: transparent;
		transition: background-color 0.2s;
		-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.66675 6.91675L6.25008 11.5001L16.3334 1.41675" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>');
		-webkit-mask-position: center center;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: 80% 80%;
		mask-image: url('data:image/svg+xml;utf8,<svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.66675 6.91675L6.25008 11.5001L16.3334 1.41675" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>');
		mask-position: center center;
		mask-repeat: no-repeat;
		mask-size: 80% 80%;
	}

	.form-check:not(.toggle) input[type=checkbox]:checked {
		background-color: var(--form-field-background-color);
	}

		.form-check:not(.toggle) input[type=checkbox]:checked::after {
			background-color: var(--form-field-text-color);
		}

	.form-check input[type=radio] {
		cursor: pointer;
		accent-color: var(--primary-color);
		width: 1.6em;
		height: 1.6em;
		appearance: none;
		border: 1px solid var(--primary-color);
		border-radius: 50%;
		padding: 0.7em;
		background-color: transparent;
		background-clip: content-box;
		transition: background-color 0.3s, padding 0.3s;
	}

		.form-check input[type=radio]:checked {
			background-color: var(--form-field-text-color);
			padding: 2px;
		}
		.form-check input[type=radio]:focus {
			outline: 3px solid var(--form-field-outline-color);
		}

.form-check:has(input[disabled]) label {
	color: var(--form-field-text-color-disabled) !important;
}