textarea,
input[type='url'],
input[type='tel'],
input[type='text'],
input[type='date'],
input[type='email'],
input[type='number'],
input[type='search'],
input[type='password'],
.selectr-selected {
	appearance: none;
	width: var(--formWidth, 100%);
	height: var(--formInputHeight);
	color: var(--formTextInitialColor);
	font-size: var(--formFontSize) !important;
	padding: var(--formPadding, 0 15px) !important;
	background-color: var(--formBackgroundInitialColor);
	transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

	&:focus {
		outline: none;
		color: var(--formTextFocusColor);
		background-color: var(--formBackgroundFocusColor);
	}

	@include input-placeholder {
		opacity: 1;
		color: inherit;
	}
}

textarea {
	--formPadding: 15px;
}

// classic forms
[data-forms='classic'] textarea,
[data-forms='classic'] input[type='url'],
[data-forms='classic'] input[type='tel'],
[data-forms='classic'] input[type='text'],
[data-forms='classic'] input[type='date'],
[data-forms='classic'] input[type='email'],
[data-forms='classic'] input[type='number'],
[data-forms='classic'] input[type='search']:not(.modal-field),
[data-forms='classic'] input[type='password'],
[data-forms='classic'] .selectr-selected {
	border-radius: var(--formBorderRadius, 3px);
	border: var(--formBorderSize) var(--formBorderStyle, solid)
		var(--formBorderInitialColor);

	&:focus {
		border-color: var(--formBorderFocusColor);
	}
}

[data-forms='classic'] .selectr-container.open .selectr-selected {
	border-color: var(--formBorderFocusColor);
}

// modern forms
[data-forms='modern'] textarea,
[data-forms='modern'] input[type='url'],
[data-forms='modern'] input[type='tel'],
[data-forms='modern'] input[type='text'],
[data-forms='modern'] input[type='date'],
[data-forms='modern'] input[type='email'],
[data-forms='modern'] input[type='number'],
[data-forms='modern'] input[type='search'],
[data-forms='modern'] input[type='password'],
[data-forms='modern'] .selectr-selected,
#search-modal .modal-field {
	border: none;
	background-image: linear-gradient(
			transparent calc(100% - var(--formBorderSize)),
			var(--formBorderFocusColor) calc(100% - var(--formBorderSize)),
			var(--formBorderFocusColor) calc(100% - var(--formBorderSize))
		),
		linear-gradient(
			transparent calc(100% - var(--formBorderSize)),
			var(--formBorderInitialColor) calc(100% - var(--formBorderSize)),
			var(--formBorderInitialColor) calc(100% - var(--formBorderSize))
		);
	background-size: 0% 100%, 100% 100%;
	background-repeat: no-repeat;

	&:focus {
		background-size: 100% 100%, 100% 100%;
	}
}

[data-forms='modern'] .selectr-container.open .selectr-selected {
	background-size: 100% 100%, 100% 100%;
}