/* stylelint-disable no-descending-specificity */
[data-contact-form] {
	position: relative;

	& .gform_heading,
	& .gform_title,
	& .gform-loader {
		display: none;
	}

	& .gform_button {
		all: revert;
		visibility: hidden;
		position: absolute;
	}

	& .gfield_label {
		font-weight: 500;
		text-transform: uppercase;
		color: currentColor;

		& .gfield_required {
			&::after {
				content: '*';
			}

			& .gfield_required_text {
				display: none;
			}
		}
	}

	& form,
	& .gform_body,
	& .gform_fields,
	& .gform_wrapper,
	& .gform_footer,
	& .gfield--type-consent {
		all: revert;
		display: contents;
	}

	& .gform_wrapper {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	& .gform_fields {
		display: flex;
		flex-wrap: wrap;
		gap: 1.5rem 1rem;
	}

	& .gfield {
		all: revert;
		display: flex;
		flex-direction: column;
		height: fit-content;
		flex-grow: 1;
		gap: 0.5rem;
		width: 100%;

		&:has(.ginput_recaptcha) {
			width: 100%;
		}

		&.gfield--width-half {
			width: max(14rem, calc(50% - 0.5rem));
		}
	}

	& .gfield_consent_label {
		color: currentColor;
		font-size: var(--text-base);

		& a {
			text-decoration: underline;
		}

		& .gfield_required_text {
			display: none;
		}
	}

	& .gform_validation_errors {
		width: 100%;
		margin-bottom: 0.5rem;
		border-radius: 0.5rem;

		&:focus-visible {
			outline: none;
		}
	}

	& .gfield_validation_message {
		font-size: var(--text-sm);
	}

	&:has(.gform_confirmation_wrapper) [data-contact-form-submitter] {
		display: none;
	}

	& .ginput_container {
		display: contents;

		& > select,
		&
			> input:where(
				:not(
					[type='submit'],
					[type='button'],
					[type='reset'],
					[type='checkbox'],
					[type='radio']
				)
			),
		& > textarea {
			appearance: revert;
			font-size: 1em;
			background: var(--color-bg-1);
			color: var(--color-fg-1);
			box-shadow: none;
			border-radius: var(--radius-md);
			border-style: solid;
			border-width: 1px;
			border-color: color-mix(
				in oklab,
				currentColor 20%,
				transparent
			);
			outline: transparent solid 1px;
			outline-offset: 0;
			padding: 0;
			width: 100%;
			transition: all 0.3s var(--ease-out);

			&::placeholder {
				color: currentColor;
			}

			&:focus {
				outline-color: color-mix(
					in oklab,
					currentColor 20%,
					transparent
				);
				outline-offset: 0.25rem;
			}
		}

		& > select,
		&
			> input:where(
				:not(
					[type='submit'],
					[type='button'],
					[type='reset'],
					[type='checkbox'],
					[type='radio']
				)
			) {
			height: 3.5em;
		}

		&
			> input:where(
				:not(
					[type='submit'],
					[type='button'],
					[type='reset'],
					[type='checkbox'],
					[type='radio']
				)
			),
		& > textarea {
			padding-inline: 1rem;
			padding-block: 0.75rem;
		}

		& > select {
			appearance: none;
			background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>')
				no-repeat;
			background-size: 1rem;
			padding-block: 0.5rem;
			background-position: calc(100% - 0.5rem) center;
			background-repeat: no-repeat;

			align-items: center;
		}

		& > textarea {
			min-block-size: unset !important;
			min-height: 3.5em;
			height: 9em;
		}
	}

	& .gform_anchor {
		position: absolute;

		&:focus-visible {
			outline: none;
		}
	}

	& [id^='gform_visibility_test'] {
		position: absolute;
	}
}