// variables
$white: #fafafa;
$lightgrey: #cccccc;
$highlight: #0083ff;

.autocomplete-dropdown {
	position: relative;
	width: 100%;
	max-width: 400px;
	font-family: sans-serif;
	box-sizing: border-box;

	> * {
		box-sizing: border-box;
	}

	.old {
		display: none;
	}

	input {
		width: 100%;
		padding: 5px 10px;
		font-size: 16px;
		outline: none;
		border: solid 1px $lightgrey;

		&:focus {
			border: solid 1px $highlight;
		}
	}

	.results {
		position: absolute;
		z-index: 1;
		width: 100%;
		top: 100%;
		left: 0;
		background-color: $white;
		border: solid 1px $lightgrey;
		display: none;

		ul {
			padding: 0;
			margin: 0;

			li {
				display: block;
				padding: 10px;
				cursor: pointer;
				color: $highlight;
				list-style: none;

				&:hover,
				&:focus {
					background-color: $highlight;
					color: $white;
				}
			}
		}
	}

	&.open {
		.results {
			display: block;
		}
	}
	
	.option-tag {
		display: block;
		position: relative;
		font-size: 14px;
		background-color: $highlight;
		color: $white;
		padding: 5px 10px;

		.remove-tag {
			display: block;
			width: 11px;
			height: 11px;
			position: absolute;
			z-index: 10;
			cursor: pointer;
			margin-left: 5px;
			top: 50%;
			right: 5px;
			transform: translate(0, -50%);

			&:before,
			&:after {
				content: " ";
				display: block;
				width: 11px;
				height: 1px;
				background-color: $white;
				position: absolute;
				top: 50%;
				left: 5px;
			}

			&:before {
				transform: translate(-50%,0) rotate(45deg);
			}
			
			&:after {
				transform: translate(-50%,0) rotate(-45deg);
			}
		}
	}
}