$lui-autocomplete-close-button-color: $grey-300 !default;
$lui-autocomplete-option-text-color: $grey-800 !default;
$lui-autocomplete-background-color: $white !default;
$lui-autocomplete-overline-color: $grey-400 !default;
$lui-autocomplete-close-button-hover-color: $grey-700 !default; 
$lui-autocomplete-selector-background-color: $white !default;
$lui-autocomplete-selector-higlight-background-color: $grey-100;
$lui-autocomplete-selector-hover-background-color: $light-blue-50;
$lui-autocomplete-overline-primary-color: $primary-1-color;
$lui-autocomplete-overline-error-color: $error;
$lui-autocomplete-overline-alert-color: $alert;
$lui-autocomplete-overline-success-color: $success;
$lui-autocomplete-dropdown-hover-color: $grey-50;


// @include keyframes(scale) {
// 	from {
// 		@include transform(scale(0));
// 	}
// 	to {
// 		@include transform(scale(1));
// 	}
// }

.lui-autocomplete {
	display: block;
	height: auto;
	position: relative;
	overflow: visible;

	.lui-autocomplete-wrap {
		display: block;
		position: relative;
		overflow: visible;
		height: 40px;
		z-index: 3;
		//box-shadow: $lui-autocomplete-box-shadow;
		
		.lui-autocomplete-subtext {
			text-overflow: ellipsis;
			width: 100%;
			position: absolute;
			bottom: -1.3em;
			font-size: 0.9em;
			line-height: 0.7em;
			@include ease-out();
		}

		// .lui-select-field-focus-overline {
		// 	position: relative;
		// 	background-color: $lui-autocomplete-overline-color;
		// 	height: 2px;
		// 	border-bottom-width: 1px;
		// 	transform: scaleX(0);
		// 	border-radius: 3px 3px 0px 0px;
		// 	z-index: 80;
		// 	@include ease-out();
		// }

		&.lui-is-primary {
			// .lui-select-field-focus-overline {
			// 	background-color: $lui-autocomplete-overline-primary-color;
			// }
			.lui-autocomplete-subtext {
				color: $lui-autocomplete-overline-primary-color;
			}
		}		

		&.lui-is-success {
			// .lui-select-field-focus-overline {
			// 	background-color: $lui-autocomplete-overline-success-color;
			// }
			.lui-autocomplete-subtext {
				color: $lui-autocomplete-overline-success-color;
			}
		}

		&.lui-is-alert {
			// .lui-select-field-focus-overline {
			// 	background-color: $lui-autocomplete-overline-alert-color;
			// }
			.lui-autocomplete-subtext {
				color: $lui-autocomplete-overline-alert-color;
			}
		}		

		&.lui-is-error {
			// .lui-select-field-focus-overline {
			// 	background-color: $lui-autocomplete-overline-error-color;
			// }
			.lui-autocomplete-subtext {
				color: $lui-autocomplete-overline-error-color;
			}
		}		

		// &.lui-is-focused {
		// 	.lui-select-field-focus-overline {
		// 		transform: scaleX(1);
		// 	}
		// }
		
		&.lui-is-disabled {
			background: $lui-text-field-disabled-background-color;

			.lui-text-field-input {
			  color: $lui-disabled-text-color;
			}

			.lui-select-field-focus-overline {
			  background: transparent;
			  height: 40px;
			  overflow: hidden;
			}
		}

		.lui-progress-linear {
			position: absolute;
			bottom: 0; left: 0; width: 100%;
			height: 3px;
			@include transition(none);

			.lui-container {
				@include transition(none);
				top: auto;
				height: 3px;
			}
		}
	}

	input {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		box-sizing: border-box;
		border: none;
		box-shadow: none;
		padding: 0 15px;
		font-size: 14px;
		line-height: 40px;
		height: 40px;
		outline: none;
		z-index: 2;
		background: transparent;
		&::-ms-clear {
			display: none;
		}
	}

	button {
		position: absolute;
		top: 10px;
		right: 10px;
		line-height: 20px;
		z-index: 3;
		text-align: center;
		width: 20px;
		height: 20px;
		cursor: pointer;
		border: none;
		border-radius: 50%;
		padding: 0;
		font-size: 12px;
		background: transparent;
		@include transform(translate3d(0, 50%, 0) scale(0));
		@include transition(transform 0.15s ease-out);
		
		&.lui-is-visible{
			@include transform(translate3d(0, 0, 0) scale(1));
		}

		&.lui-is-select {
			top: 0px;
			right: 0px;
			width: 40px;
			height: 40px;
			polygon {
				@include transition(fill 0.1s ease-out);
				fill: $lui-autocomplete-close-button-color;
			}
		}

		&:hover{
			path {
				@include transition(fill 0.1s ease-out);
				fill: $lui-autocomplete-close-button-hover-color;
			}
			polygon {
				@include transition(fill 0.1s ease-out);
				fill: $lui-autocomplete-close-button-hover-color;
			}
			
			&.lui-is-select {
				background: $lui-autocomplete-dropdown-hover-color;
				border-radius: 0px;
			}
		}

		&:after {
			content: '';
			position: absolute;
			top: -6px;
			right: -6px;
			bottom: -6px;
			left: -6px;
			border-radius: 50%;
			opacity: 0;
			z-index: -1;
			@include ease-out();
			@include transform(scale(0));
		}

		&:focus {
			outline: none;
			&:after {
				@include transform(scale(1));
				opacity: 1;
			}
		}

		.lui-svg-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			@include transform(translate3d(-50%, -50%, 0) scale(0.9));

			path {
				@include transition(fill 0.1s ease-out);
				fill: $lui-autocomplete-close-button-color;
			}
		}
	}

	ul {
		background-color: $lui-autocomplete-selector-background-color;
		position: absolute;
		top: 40px;
		left: 0;
		right: 0;
		//box-shadow: 0 2px 5px rgba(black, 0.25);
		margin: 0;
		list-style: none;
		padding: 0;
		overflow: auto;
		max-height: 41px * 5.5;
		z-index: 3;
		@include ease-out;

		&.lui-is-top {
			top: initial;
			bottom: 40px;
		}

		li {
			border-top: 1px solid #ddd;
			padding: 0 15px;
			line-height: 40px;
			font-size: 14px;
			overflow: hidden;
			height: 40px;
			@include transition(background 0.15s linear);
			cursor: pointer;
			margin: 0;

			&.selected {
				background: $lui-autocomplete-selector-higlight-background-color;
			}

			&:hover {
				background: $lui-autocomplete-selector-hover-background-color;
			}

			a {
				text-decoration: none;
				color: $lui-autocomplete-option-text-color;
			}
		}
	}
}