@import "mixins/mixins";
@import "mixins/utils";
@import "common/var";
@import "./input.scss";
@import "./scrollbar.scss";
@import "./popper";

@include b(autocomplete) {
	position: relative;
	display: inline-block;
}

@include b(autocomplete-suggestion) {
	margin: 5px 0;
	box-shadow: $--box-shadow-light;
	border-radius: $--border-radius-base;
	border: 1px solid $--border-color-light;
	box-sizing: border-box;
	background-color: $--color-white;

	@include e(wrap) {
		max-height: 280px;
		padding: 10px 0;
		box-sizing: border-box;
	}

	@include e(list) {
		margin: 0;
		padding: 0;
	}

	& li {
		padding: 0 20px;
		margin: 0;
		line-height: 34px;
		cursor: pointer;
		color: $--color-text-regular;
		font-size: $--font-size-base;
		list-style: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

		&:hover {
			background-color: $--select-option-hover-background;
		}

		&.highlighted {
			background-color: $--select-option-hover-background;
		}

		&.divider {
			margin-top: 6px;
			border-top: 1px solid $--color-black;
		}

		&.divider:last-child {
			margin-bottom: -6px;
		}
	}

	@include when(loading) {
		li {
			text-align: center;
			height: 100px;
			line-height: 100px;
			font-size: 20px;
			color: #999;
			@include utils-vertical-center;

			&:hover {
				background-color: $--color-white;
			}
		}

		& .el-icon-loading {
			vertical-align: middle;
		}
	}
}