.vlTaggableInput{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	.vlTaggableContent{
		display: flex;
		flex: 1 1 auto;
		min-width: 0; //important for a Firefox flex bug where children were overflowing the parent		
		flex-wrap: wrap;
		min-height: var(--form-control-min-height);
		align-items: center;
	}
	.vlSingle{
		padding: var(--form-control-padding);
		>div{
			.icon-times{
				color: gainsboro;
				cursor: pointer;
			}
			&.vlCustomLabel{ // to align x with customLabel, don't remove
				display: flex;
	    		align-items: center;
	    	}
		}
	}
	.vlTags{
		padding-top: calc(var(--form-control-padding-t) - 0.1rem);
		padding-bottom: calc(var(--form-control-padding-b) - 0.1rem);
		padding-left: calc(var(--form-control-padding-l) - 0.25rem);
		padding-right: calc(var(--form-control-padding-r) - 0.25rem);
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		>div{
			background-color: var(--tags-bg);
			color: var(--tags-color);
			//font-weight: 500;
			@include tag();
			margin: 0.1rem;
		    padding: 0.1rem 0.5rem 0.1rem 0.2rem; //has to be after @include tag()
			&.vlCustomLabel{ // to align x with customLabel, don't remove
				display: flex;
	    		align-items: center;
	    	}
		}
	}
}
.vlDirtyField .vlTaggableInput{
	.vlFormControl{
		position: absolute;
		opacity: 0;
		width: 1px;
		right: 0;
	}
}
.vlFocusedField .vlTaggableInput{
	.vlSingle{
		display: none;
	}
	.vlFormControl{
		position: initial;
		opacity: 1;
		width: 100%;
	}
}
.vlFocusedField.vlDirtyField .vlTaggableInput{
	.vlTags{
		//padding-bottom: 0; //to delete.. why?
	}
}