@import "ansyn/less/common";
@import "ansyn/less/colors";
@import "ansyn/less/z-index-globals";
@import "ansyn/less/globals";

:host {
	position: absolute;
	top: @compass-top + (@compass-width / 2) + 3; // middle of compass
	transform: translateY(-100%); // locate bottom of search box there
	left: @compass-side-margin + @compass-width + 14;
	z-index: @z-index-map-search-box;
	font-size: 12px;
	background-color: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.8);
	color: white;
	padding: 10px;

	&.hide {
		display: none;
	}
	form {
		display: flex;
		flex-wrap: nowrap;
		border: 1px rgba(255, 255, 255, 0.8);

		input {
			width: 230px;
			padding: 0;
			margin: 0;
			border: none;
			outline: none;
			background-color: inherit;
			color: inherit;

			&::placeholder {
				color: rgba(255, 255, 255, 0.8);
			}

			// Overcome Chrome's default autofill yellow background
			&:-webkit-autofill,
			&:-webkit-autofill:hover,
			&:-webkit-autofill:focus,
			&:-webkit-autofill:active {
				transition: background-color 5000s ease-in-out 0s;
				-webkit-text-fill-color: white;
			}
		}

		button {
			padding: 0 2px;
			margin: 0;
			border: none;
			outline: none;
			background-color: inherit;
			color: inherit;
		}
	}
}
