.vlInputGroup{
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	.vlFormControl{
		flex: 1;
		min-width: 0; //important for a Firefox flex bug where children were overflowing the parent
	}
}

.vlInputPrepend,.vlInputAppend{
	color: var(--form-field-icon-color);
	cursor: pointer;
	display: flex;
	align-items: center;
	flex-grow: 0;
	flex-shrink: 0;
}

.vlInputPrepend{
	padding: var(--form-control-padding-t) 0 var(--form-control-padding-b) var(--form-control-padding-l);
}

.vlInputAppend{
	padding-right: var(--form-control-padding-r); //in MD Filled, we want to center rIcon vertically but not the left one
}