#search-modal .modal-field,
[data-forms='modern'] textarea,
[data-forms='modern'] .selectr-selected,
[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='search'],
[data-forms='modern'] input[type='number'],
[data-forms='modern'] input[type='password'] {
	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%;
}


[data-forms='modern'] form {
	--formPadding: 0;

	textarea {
		--formPadding: 15px 0;
	}
}

// select
[data-forms='modern'] select {
	border: none;
	background-image: 
		linear-gradient(
			transparent calc(100% - var(--formBorderSize)),
			var(--formBorderInitialColor) calc(100% - var(--formBorderSize)),
			var(--formBorderInitialColor) calc(100% - var(--formBorderSize))
		),
		url("data:image/svg+xml,%3Csvg width='21' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5.379L20.621 2.5 10.5 12.621.379 2.5 2.5.379l8 8z' fill='%234F5D6D' fill-rule='nonzero'/%3E%3C/svg%3E");
		background-repeat: no-repeat, no-repeat;
		background-size: 100% 100%, 8px auto;
		background-position: 0 0, right 15px top 50%;
}