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, 45px);
	padding: var(--formPadding, 0 15px);
	
	font-size: var(--formFontSize) !important;
	color: var(--formTextInitialColor);

	border-radius: var(--formBorderRadius, 3px);
	border: var(--formBorderSize) var(--formBorderStyle, solid) var(--formBorderInitialColor);

	background-color: var(--formBackgroundInitialColor);

	transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

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

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

textarea {
	--formPadding: 15px;
}

.selectr-container {	
	&.open .selectr-selected {
		border-color: var(--formBorderFocusColor);
	}
}


.ct-modern-forms {
	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 {
		--formBorderRadius: 0px;

		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%;
		}
	}

	// select
	.selectr-container {
		&.open .selectr-selected {
			background-size: 100% 100%, 100% 100%;
		}
	}
}