@scope(.ac-mapbox) {
	#sidebar {
		height: 100%;
		max-width: 50%;
		min-width: 275px;
		position: absolute;
		width: calc(100% / 3);
		background: var(--ast-global-color-5);
	}

	#handle {
		top: 50%;
		z-index: 1;
		width: 30px;
		height: 30px;
		padding: 4px;
		cursor: e-resize;
		position: absolute;
		border-radius: 50%;
		right: calc(-30px / 2);
		border: 1px solid #ccc;
		transform: translateY(-50%);
		background: var(--ast-global-color-5);
	}

	#map {
		width: 100%;
	    height: 100%;
		position: absolute;
		left: calc(100% / 3); /* TODO remove this and show sidebar on dirty select */

		.mapboxgl-ctrl-geocoder--input { padding-inline-start: 2em; }
	}

	#geolocation { gap: 8px; display: flex; justify-content: center; }
	#geolocation, h3 { padding: 12px; border-bottom: 1px solid #eee; }

	#items {
		height: 100%;
		display: flex;
		overflow: auto;
		flex-direction: column;

		.item {
			color: #AAA;
			height: 100%;
			padding: 5px;
			text-align: center;
			align-content: center;
			text-decoration: none;
			transition: all .2s ease;
			text-transform: uppercase;
			border-bottom: 1px solid #eee;

			&:not(.empty) { cursor: pointer; }
			&:last-child { border-bottom: none; }

			&.active { background: #eee !important; }
			&:not(.empty):hover { background: #f8f8f8; }

			small { display: block; font-weight: 400; }
		}
	}

	select {
		border: 0;
		height: 36px;
		width: inherit;
		cursor: pointer;
		min-width: 240px;
		appearance: none;
		padding: 6px 35px;
		border-radius: 4px;
		position: relative;
		white-space: nowrap;
		text-overflow: ellipsis;
		transition: all .2s ease;
		color: rgba(0, 0, 0, 0.75);
		font: 400 15px "Open Sans", sans-serif;
		background: var(--ast-global-color-5) url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23757575%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;

		&:focus {
			color: #000000bf;
			box-shadow: none;
			outline: thin dotted;
		}

		option {
			color: #404040;
			display: block;
			cursor: default;
			padding: 6px 12px;

			&:first-child { color: #404040; }
		}
	}

	pre {
		margin: 0;
		display: none;
		cursor: pointer;
		font-size: 11px;
		padding: 5px 10px;
		background: #0008;
		line-height: 18px;
		border-radius: 3px;
		transition: all .2s ease;
		width: max-content !important;
		color: var(--ast-global-color-5);
		font-family: Montserrat, sans-serif;

		&:hover { background-color: #006edc; }
	}

	#loading-overlay {
		top: 0;
		left: 0;
		opacity: 1;
		z-index: 2;
		width: 100%;
		height: 100%;
		display: flex;
		position: absolute;
		align-items: center;
		pointer-events: all;
		flex-direction: column;
		justify-content: center;
		background-color: #fffc; /* TODO color mix var(--ast-global-color-5) and alpha */
		transition: opacity 0.3s ease;

		&.hide { opacity: 0; pointer-events: none; }
		svg { animation: rotate 1s linear infinite; }
	}

	@keyframes rotate {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.popup-title .mapboxgl-popup-content {
		padding: 10px;
	}
}