.vlInputWrapper{
	display: block;
	position: relative; //for absolute positiong the expanding border
	background-color: var(--form-control-bg);
	border: var(--form-control-border);
	border-radius: var(--form-control-border-radius);

	&:focus{
		outline: 0; //if focusable, for ex: in ButtonGroup
	}
	
	&:focus-within{
		border-color: var(--form-control-border-color-focused);
		box-shadow: var(--focus-box-shadow);
	}
	@if variable-exists(form-control-border-bottom){
		border-bottom: $form-control-border-bottom;
	}
	@if variable-exists(form-control-border-expanding){
		&:after{
			position: absolute;
			content: "";
			display: block;
			z-index: 4;
			width: 100%;
			height: $form-control-border-expanding;
			background-color: var(--form-control-border-color-focused);
			opacity: 0;
			transform: scaleX(0.1); 
			transition: .2s ease;
			will-change: opacity, transform;
			transition-property: opacity, transform;
		}
		&:focus-within{
			&:after{
				transform: scaleX(1);
				opacity: 1;
			}
		}
	}
}

input, textarea, select{
	background-color: transparent; //reset the default browser bg #fff
	&:-internal-autofill-selected{
		background-color: transparent !important;
	}
}

.vlFormControl{
	padding: var(--form-control-padding);	
	width: 100%;
	outline: 0; //relegated to InputWrapper
	min-height: var(--form-control-min-height);
	
	&::placeholder { color: var(--form-control-placeholder-color); }
}

.vlHasErrors{
	.vlInputWrapper{
		border-color: var(--form-field-error-color);
		@if variable-exists(form-control-border-expanding){
			&:after{
				background-color: var(--form-field-error-color);
			}
		}
	}
}

.vlFieldErrors{
	color: var(--form-field-error-color);
	font-size: 80%;
	padding-left: 0.25rem;
	//position: absolute;
	//bottom: -1.2rem;
}

.vlReadOnly{
	.vlInputWrapper{
		cursor: default;
	}
}
input:read-only{ 
	cursor: default;
}