.form__element {
	line-height: 0;
	position: relative;
}

.form__element label {
	display: block;
	margin-bottom: var(--s-08);
}

.form__element + .form__element,
input[type="hidden"] + .form__element,
.form__element + .form__group,
.form__group + .form__element,
.form__group + .form__group {
	margin-top: var(--s-16);
}

.form__element input[type="text"],
.form__element input[type="email"],
.form__element input[type="search"],
.form__element select,
.form__element textarea {
	border: solid 1px currentcolor;
	box-sizing: border-box;
	cursor: text;
	font-size: clamp(1rem, var(--s-18), 1.5rem);
	line-height: 1.25;
	padding: var(--s-10) var(--s-12);
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
}

.form__element select {
	cursor: pointer;
}

.form__element input[type="search"]::-webkit-search-cancel-button,
.form__element input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

.form__element input::placeholder,
.form__element textarea::placeholder {
	color: rgba(currentcolor, 0.4);
}

	.form__element input:focus,
	.form__element input:active,
	.form__element textarea:focus,
	.form__element textarea:active {
		border-color: currentcolor;
	}
	
	.form__element input:-webkit-autofill,
	.form__element textarea:-webkit-autofill:hover {
		box-shadow: 0 0 0 10rem var(--color-white) inset !important;
		-webkit-box-shadow: 0 0 0 10rem var(--color-white) inset !important;
	}
	
.form__element input[type="checkbox"] {
	cursor: pointer;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
	
.form__element input[type="checkbox"] + label {
	display: block;
	padding-left: var(--s-20);
}
	
	.form__element input[type="checkbox"] + label:before {
		content: '';
		border: solid 1px currentcolor;
		display: inline-block;
		height: var(--s-12);
		left: 0;
		position: absolute;
		pointer-events: none;
		top: 1px;
		width: var(--s-12);
	}
	
	.form__element input[type="checkbox"] + label:after {
		background: currentcolor;
		content: '';
		display: inline-block;
		height: var(--s-08);
		left: 0;
		margin: var(--s-03);
		opacity: 0;
		position: absolute;
		pointer-events: none;
		top: 1px;
		width: var(--s-08);
	}
	
	.form__element input[type="checkbox"]:checked + label:after {
		opacity: 1;
	}
	
	.form__element--select:after {
		bottom: 27.5%;
		content: '';
		width: 0;
		height: 0;
		border-style: solid;
		border-width: var(--s-06) var(--s-05) 0 var(--s-05);
		border-color: currentcolor transparent transparent transparent;
		pointer-events: none;
		position: absolute;
		right: var(--s-16);
	}
	
.form__element a {
	opacity: 0.4;
	position: relative;
	text-decoration: underline;
	z-index: 1;
}

.form__element__input,
.select__select {
	width: 100%;
	box-sizing: border-box;
	position: relative;
}

.legal__container {
	margin-top: var(--s-12);	
}

.form--success,
.form--error,
.input__error {
	display: none;
}

.form--success {
	color: var(--color-success);
	padding-bottom: 0 !important;
}

.form--error {
	color: var(--color-error);
	padding-bottom: 0 !important;
}

.input__error {
	color: var(--color-error);
	font-weight: 600;
	padding-top: var(--s-08);
}

.form__results .button {
	margin-top: var(--s-24);
}

.success .form--success,
.error .form--error,
.error .input__error {
	display: block;
}

.error.form__element input[type="text"],
.error.form__element input[type="email"],
.error.form__element input[type="search"],
.error.form__element select,
.error.form__element textarea,
.error.form__element input[type="checkbox"] + label:before {
	color: var(--color-error);
	border-color: var(--color-error);
}

.error.form__element label {
	color: var(--color-error);
}

.submit__container {
	margin-top: var(--grid-margin);
}

.submit__newsletter {
	margin-top: var(--s-08);
}

.newsletter__control .form__element input[type="text"],
.newsletter__control .form__element input[type="email"] {
	font-size: clamp(0.875rem, var(--s-16), 1.25rem);
	line-height: 1.25;
}


@media (hover: hover) {
	
	.form__element a:hover {
		opacity: 1;
	}
	
}