@keyframes prixClipFix {
	0% {
		clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
	}
	25% {
		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
	}
	50% {
		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
	}
	75% {
		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
	}
	100% {
		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
	}
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.contact-form {
	position: relative;
	margin-bottom: 1.5rem;

	.contact-form__loading {
		@include multitransition(opacity);
		position: absolute;
		inset: -1rem;
		z-index: 5;
		background-color: rgba(255, 255, 255, 0.35);
		backdrop-filter: blur(5px);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 0.25rem;
		opacity: 0;
		pointer-events: none;
	}

	&[data-state="sending"] .contact-form__loading {
		opacity: 1;
		pointer-events: all;
	}

	.contact-form__loader {
		width: 64px;
		height: 64px;
		display: inline-block;
		border-radius: 50%;
		animation: rotate 1s linear infinite;

		&::before,
		&::after {
			content: "";
			box-sizing: border-box;
			position: absolute;
			inset: 0px;
			border-radius: 50%;
			border: 5px solid var(--theme-palette-color-1);
			animation: prixClipFix 2s linear infinite;
		}

		&::after {
			border-color: var(--theme-palette-color-2);
			animation: prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse;
			inset: 6px;
		}
	}

	fieldset {
		border: 0;
		padding: 0;
	}

	legend {
		font-size: 1.5rem;
		font-weight: 300;
	}

	.form-text {
		font-size: 0.85rem;
		color: #666;
	}

	.contact-form__phone {
		@include visually-hidden;
		display: none;
	}

	label:has(input[type="checkbox"]) {
		display: grid;
		grid-template-columns: 1rem auto;
		align-items: center;
		gap: 1rem;
	}

	input[type="checkbox"] {
		--form-control-color: var(--theme-palette-color-2);
		--dim: 0.75rem;
		/* Add if not using autoprefixer */
		-webkit-appearance: none;
		/* Remove most all native input styles */
		appearance: none;
		/* For iOS < 15 */
		background-color: #fff;
		/* Not removed via appearance */
		margin: 0;

		font: inherit;
		color: currentColor;
		width: calc(var(--dim) * 1.75);
		height: calc(var(--dim) * 1.75);
		border: 2px solid var(--theme-form-field-border-initial-color);
		border-radius: 0.25rem;
		//transform: translateY(-0.05em);

		display: grid;
		place-content: center;
	}

	input[type="checkbox"]:checked {
		border-color: #ccc;
	}

	input[type="checkbox"]::before {
		content: "";
		width: var(--dim);
		height: var(--dim);
		clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
		transform: scale(0);
		transform-origin: center center;
		transition: 120ms transform ease-in-out;
		box-shadow: inset 1em 1em var(--form-control-color);
		/* Windows High Contrast Mode */
		background-color: CanvasText;
	}

	input[type="checkbox"]:checked::before {
		transform: scale(1);
	}

	input[type="checkbox"]:focus {
		outline: max(2px, 0.15em) solid currentColor;
		outline-offset: max(2px, 0.15em);
	}
}