html[theme=light] {
	.field {
		textarea {
			border-color: #CFCFCF;
		}
	}
}

.field {

	input,
	textarea {
		font-size: 14px;
		color: #2e2e2e;
		outline: none;
		transition: border-color 0.2s;
		width: 100%;
		border: 1px solid transparent;

		&:placeholder {
			color: var(--color-text-second);
		}

		&:hover,
		&:focus {
			border-color: var(--color-active);
		}
	}

	textarea {
		line-height: 1.5;
		color: var(--color-text);
		width: 100%;
		resize: none;
		padding: 16px;
		background-color: transparent;
		height: 137px;
		border: 1px solid var(--color-input-stroke);
		border-radius: 12px;

	}

	&.field--md {
		input {
			min-height: 52px;
			padding: 0 16px;
			border-radius: var(--rounded-lg);
		}
	}

	&.field--white {

		textarea,
		input {
			background-color: #fff;
		}
	}

}

.field__error {
	display: block;
	margin-top: 8px;
	color: var(--color-error);
	font-size: 14px;
}

[data-field-error] {
	display: none;
}

[data-field-error].is-visible {
	display: block;
}

.field.has-error {
	input,
	textarea {
		border-color: var(--color-error);
	}
}