/*==================================*/
/*=====----- THEMATIC MAP -----=====*/
/*==================================*/

.thematic-map-slides {
	position: relative;
	z-index: 2;
	margin-bottom: 60px;

	.stage {
		position: relative;
	}

	.map-col {
		position: relative;
		z-index: 2;
		background: #FBF1E0;
		box-shadow: 0px 3px 16.8px 0px rgba(0, 0, 0, 0.30);
		overflow: hidden;
	}

	.slides-col {
		width: calc(100% - var(--space-10));
		margin: 0 auto;
		background: var(--off-white);
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
		overflow: hidden;
	}

	.map-note {
		padding: 10px var(--space-5) 7px;
		margin: 0;
		font-family: var(--font-body);
		font-weight: var(--font-weight-semibold);
		font-size: var(--text-sm);
		line-height: 1.2;
		color: var(--white);
	}

	.background {
		position: absolute;
		inset: 0;
		z-index: -1;
		background: var(--black);
		pointer-events: none;

		.slide-img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			opacity: 0.75;
		}
	}

	.zoom-buttons {
		position: absolute;
		inset: 5px auto auto 5px;
		z-index: 10;
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.zoom-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 3.125rem;
		aspect-ratio: 1;
		padding: 0;
		margin: 0;
		font-size: 1.375rem;
		line-height: 1;
		color: var(--white);
		background-color: var(--teal);
		border: none;
		border-radius: 0;
		pointer-events: all;

		&::before {
			font: var(--fa-font-solid);
		}

		&.plus::before {
			content: '\2b';
		}

		&.minus::before {
			content: '\f068';
		}
		&.disabled {
			pointer-events: none;
			background-color: var(--sw-button-primary-bg);
			opacity: 0.3;
		}
	}
	
	/*----- map SVG -----*/

	.map-svg,
	.grand-teton-map,
	.yellowstone-map {
		width: 100%;

		* {
			filter: none !important;
		}

		.drop-shadow {
			display: none;
		}

		.interactive {
			position: relative;
			z-index: 1;
			transform-box: fill-box;
			transform-origin: center;
			cursor: pointer;
			pointer-events: all;
			transition: scale var(--transition-appendix);
		}

		.hover,
		.default-text {
			transition:
				opacity var(--transition-appendix),
				visibility var(--transition-appendix);
		}

		.default-text {
			transform-box: fill-box;
			transform-origin: center;
			transition: scale var(--transition-appendix);
		}

		.hover-text {
			display: none;
		}
		
		.sign .hover {
			position: relative;
			z-index: 2;
		}

		.plane {
			transition:
				fill var(--transition-appendix),
				stroke-width var(--transition-appendix),
				stroke var(--transition-appendix);
		}

		.hover {
			opacity: 0;
			visibility: hidden;
		}

		.hover.active {
			opacity: 1;
			visibility: visible;
		}

		.default-text.zoom {
			scale: 1.1;
		}

		.hover.active.region {
			opacity: 0.6;
		}

		.hover.active.region.light {
			opacity: 0.4;
		}

		.hover.active.region.lighter {
			opacity: 0.3;
		}

		.interactive.active,
		.interactive.clicked {
			z-index: 3;
			scale: 1.3;
		}
	}

	.yellowstone-map .interactive {
		&.sign-north {
			transform-origin: center top;
		}

		&.sign-northeast {
			transform-origin: right top;
		}

		&.sign-south {
			transform-origin: center bottom;
		}

		&.sign-east {
			transform-origin: right center;
		}

		&.sign-west {
			transform-origin: left center;
		}
	}

	/*----- media queries -----*/

	@media (hover: hover) {
		.map-svg {
			.sign:hover .hover {
				opacity: 1;
				visibility: visible;
			}

			.plane:hover {
				fill: var(--gold-lighter);
				stroke-width: 1px;
				stroke: #4f0405;
			}
		}
	}

	@media (min-width: 64em) {
		padding: var(--space-5);

		.stage {
			display: grid;
			grid-template-columns: 67.71% minmax(0, 1fr);
			align-items: start;
			gap: 18px;
			padding: var(--space-4);
			background: var(--off-white);
			box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
			transition: height var(--transition-appendix);
		}

		.map-col {
			box-shadow: none;
		}

		.slides-col {
			width: auto;
			height: 100%;
			padding: var(--space-6) 0 0;
			margin: 0;
			background: none;
			box-shadow: none;
		}

		.map-note {
			padding: 11px 0 0;
		}

		.zoom-buttons {
			top: 36px;
			left: 36px;
			gap: 10px;
		}

		.map-svg,
		.grand-teton-map
		.yellowstone-map {
			.interactive.active,
			.interactive.clicked {
				scale: 1.4;
			}
		}
	}

	@media (min-width: 90em) {
		padding: 50px 87px 22px;

		.stage {
			padding: 27px 26px;
		}
	}
}