// --------------------------------------------------------------------------------------------
// GOOGLE MAPS 
// --------------------------------------------------------------------------------------------

.google-map-container {
	position: relative;

	&.google-map-container-with-content {

		.basel-google-map-wrapper {
			position: absolute;
			width: 100%;
			height: 100%;

			.basel-google-map {
				width: 100%;
			}
		}
	}

	.gm-style-iw {
		text-align: center;
	}
}

.map-mask-dark {
	background-color: #000;

	.basel-google-map-wrapper {
		opacity: .6;
	}
}

.map-mask-light {
	background-color: white;

	.basel-google-map-wrapper {
		opacity: .7;
	}
}

.google-map-container img {
	max-width: none;
}

// ------------------------------------------
// MAP LAZY LOADING
// ------------------------------------------

.basel-map-placeholder {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	overflow: hidden;

	img {
		width: 100%;
		height: 100%;

		-o-object-position: 50% 50%;
		object-position: 50% 50%;
		-o-object-fit: cover;
		object-fit: cover;
	}
}

.basel-init-map {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	svg {
		margin-top: -2px;
		margin-right: 10px;
		width: 25px;
		height: 25px;
	}

	span {
		margin-top: 4px;
	}
}

.google-map-container {

	.basel-init-map-wrap {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 10;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
}

.map-lazy-loading {

	&:not(.basel-map-inited) {

		.basel-google-map-content-wrap {
			display: none;
		}
	}
}

.basel-map-inited {

	.basel-map-placeholder,
	.basel-init-map-wrap {
		display: none;
	}
}