.vlSelect{
	.icon-down{
		color: var(--form-control-placeholder-color);
	}
	.vlOptions{
		display: none;
	}
	&.vlFocusedField{ //doesn't work with focus-within... CSS executes before click so option can't be selected
		.vlOptions{
			display: block;
		}
	}
}
.vlOptions{
	position: absolute;
	left: 0;
	background-color: var(--body-color);
	z-index: 50;
	max-height: 240px;
	overflow-y: auto;
	@extend .mini-scroll !optional;
	width: 100%;
	border: 1px solid var(--form-control-border-color);
	border-radius: 0 0 5px 5px;
	.vlOption{
		cursor: pointer;
		padding: var(--form-control-padding-t) var(--form-control-padding-r) var(--form-control-padding-b) var(--form-control-padding-l);
	}
}

.vlOption{
	&.vlHoveredOption{
		background-color: var(--primary-light);
	}
	&.vlSelected{
		background-color: mix(blue, #fff, 15%);
		opacity: 0.5;
	}
	&.vlSelected.vlHoveredOption{
		//background-color: mix(red, #fff, 15);
	}
}