html[theme=light] {
	.field {

		input,
		textarea {
			background: var(--color-only-white);
		}

	}
}

.field {

	input,
	textarea {
		font-size: 14px;
		color: var(--color-text);
		outline: none;
		transition: border-color 0.2s;
		width: 100%;
		border: 1px solid var(--color-input-stroke);
		background-color: 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;

		height: 137px;
		border-radius: 12px;

	}

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

	&.field--sm {
		position: relative;

		input {
			min-height: 28px;
			padding: 0 10px;
			border-radius: var(--rounded-md);
		}
	}

	&.field--with-icon-left {
		&::before {
			position: absolute;
			content: '';
			left: 8px;
			top: 50%;
			translate: 0 -50%;
			aspect-ratio: 1;
			width: 16px;
			-webkit-mask: var(--field-icon-mask, url('/src/img/icons/search.svg')) center/contain no-repeat;
			mask: var(--field-icon-mask, url('/src/img/icons/search.svg')) center/contain no-repeat;
			background-color: var(--field-icon-color, var(--color-icon));
			pointer-events: none;
		}

		input {
			padding-left: 28px;
		}
	}

	&.field--white {

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

}

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

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

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

.field.has-error {

	input,
	textarea {
		border-color: var(--color-danger);
	}
}