/**
 * Map
 *
 * Description: Styles for the map.
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents:
 *
 * 1.0 - Map
 *   1.1 - Map popup
 * 2.0 - Filtered map
 *   2.1 - Filtered map (responsive)
 * -----------------------------------------------------------------------------
 */


/**
 * 1.0 - Map
 * -----------------------------------------------------------------------------
 */

.map {
	width: 100%;
	height: 300px;
	z-index: 200;

	&:before {
		@extend .loader;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: em(-9px) 0 0 em(-10px);
	}

	&.map-is-initiated:before {
		display: none;
	}

	.olControlAttribution {
		bottom: em(12px);
		right: auto;
		left: em(-15px);
	}

	.gwt-Anchor, .GEFHICNCBEB {
		display: none !important;
	}

	.olMapViewport image {
		cursor: pointer !important;
	}
}


/**
 * 1.1 - Map popup
 * -----------------------------------------------------------------------------
 */

.map {
	#MapFeaturePopup_FrameDecorationDiv_0, #MapFeaturePopup_FrameDecorationDiv_1, #MapFeaturePopup_FrameDecorationDiv_2, #MapFeaturePopup_FrameDecorationDiv_3, #MapFeaturePopup_FrameDecorationDiv_4 {
		display: none !important;
	}

	#MapFeaturePopup_GroupDiv {
		background-color: $white;
		height: auto !important;
		width: auto !important;
		padding: em(5px) em(15px) em(10px) !important;
	}

	.olFramedCloudPopupContent {
		position: relative !important;
		height: auto !important;
		left: auto !important;
		top: auto !important;
	}

	.gismo-MapPopupContainer {
		font-size: em(20px) !important;
	}

	.olPopupCloseBox {
		top: em(5px) !important;
		right: em(5px) !important;
	}

	.gismo-MapPopupHeading {
		font-family: $font-family-base;
		font-weight: 600;
		margin: 0;
		font-size: em(17px);
	}

	.gismo-MapPopupBody {
		font-size: em(14px);
	}
}



/**
 * 2.0 - Filtered map
 * -----------------------------------------------------------------------------
 */

.map-filtered {
	position: relative;
	width: 100%;
	height: 500px;

	.map {
		height: 500px;
	}

	.map-filter-form {
		position: absolute;
		top: 0;
		right: 0;
		max-width: 325px;
		width: 27%;
		padding: $margin-standard / 2;
		height: 100%;
		overflow: auto;
		z-index: 800;
		background-color: rgba(255, 255, 255, 0.7);
		border-top: em(5px) solid $accent-color;
	}
}


/**
 * 2.1 - Filtered map (responsive)
 * -----------------------------------------------------------------------------
 */

@media (max-width: $device-small-max) {
	.map-filtered {
		height: auto;

		.map-holder {
			display: none;
			background-color: $white; 
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 860;

			&.is-active {
				display: block;
			}
		}

		.map {
			width: 100%;
			height: 100%;

			.olControlAttribution {
				bottom: 60px;
				left: -24px;
			}
		}

		.map-filter-form {
			position: relative;
			top: auto;
			right: auto;
			height: auto;
			width: 100%;
			max-width: none;
		}


		.map-close-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: $white; 
			color: $text-color;
			text-align: center;
			padding: $margin-standard / 2 0;
			z-index: 850;
		}
	}
}