.c-auto-complete {
	position: relative;
}

.c-auto-complete__dropdown {
	background-color: #fff;
	border: 1px solid @color-gray-x-light;
	border-radius: 4px;
	box-shadow: @dropdown-box-shadow;
	display: none;
	max-height: 300px;
	overflow-y: auto;
	position: absolute;
	top: calc(100% + 2px);
	width: 370px;
	z-index: 2;

	&.is-visible {
		display: block;
	}
}

.c-auto-complete__match-row {
	cursor: pointer;
	padding: 5px 10px;

	&.with-mouse:hover,
	&.with-keyboard.is-selected {
		background-color: @color-gray-xx-light;
	}
}

.c-auto-complete__input {
	.has-close-button & {
		padding-right: 36px; // add padding to not allow text under close button
	}
}

.c-auto-complete__spinner.far {
	// combination selector used to override FA styles
	display: none;
	position: absolute;
	right: 10px;
	top: 10px;

	&.is-visible {
		display: inline;
	}
}

.c-auto-complete__close {
	cursor: pointer;
	display: none;
	font-size: 20px;
	position: absolute;
	right: 10px;
	top: 7px;

	&:hover {
		color: @color-gray-x-dark;
	}

	.has-close-button & {
		display: inline;
	}
}