@use "@styles/common";
@use "@styles/var";
@use "@styles/color";
@use "@styles/page.project.panel";

$thumbnail-max-size: 60px;

#map {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	@include common.font();
	font-size: 12px;
	line-height: 18px;

	.maplibregl-marker-covered {
		pointer-events: none;
	}

	.maplibregl-marker {
		.spot-icon-stack:is(.media, .message, .project) {
			display: inline-block;
			transform-origin: center bottom;
			transition: transform var.$trans-quick;
		}

		&:hover .spot-icon-stack:is(.media, .message, .project) {
			transform: scale(var.$zoom-scale);
		}
	}

	.maplibregl-popup {
		max-width: 300px;
	}

	.maplibregl-popup-tip {
		border-top-color: color.$default-bg-light;
	}

	.maplibregl-popup-content {
		padding: var.$block-spacing;
		background-color: color.$default-bg-light;
		
		.header h1 {
			font-size: 1.4em;
			margin: 0;
			font-weight: bold;
			text-align: center;
		}
		.hitchhiking .header h1 {
			font-size: 1em;
			line-height: 1em;
			font-weight: normal;
		}

		.description {
			text-align: center;
		}

		.separator {
			border-top: 1px solid color.$default-bg;
			margin: var.$elem-spacing 0;
		}

		.section {
			font-size: 1.0em;
			margin: var.$elem-spacing 0 0 0;

			&:first-child {
				margin: 0;
			}

			a {
				color: color.$default;
			}
		}

		.track-stats {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var.$elem-spacing var.$block-spacing;
		}

		.destination {
			display: grid;
			gap: var.$elem-spacing var.$block-spacing;
		}

		.medias-list {
			line-height: 0;
			
			a.media-link {
				img {
					width: auto;
					height: auto;
					image-orientation: from-image;
					transition: All var.$trans-quick;
					border-radius: var.$block-radius;
				}

				&.drill {
					.drill-image {
						color: transparent;
					}
					.drill-video {
						color: color.$over-img-bg;
					}

					&:hover {
						.drill-video, .drill-image {
							color: color.$default-bg;
						}
					}
				}
			}
		}

		.message {
			.medias-list {
				display: flex;
				flex-wrap: wrap;
				gap: var.$elem-spacing;
				align-items: center;
				margin-top: var.$elem-spacing;

				a.media-link {
					flex: 0 0 auto;

					img {
						max-width: $thumbnail-max-size;
						max-height: calc($thumbnail-max-size * 2/3);
					}

					&.drill .drill-icon {
						font-size: 1.5em;
					}
				}
			}
		}

		.media {
			.medias-list {
				a.media-link img {
					width: 100%;
				}
			}
		}

		.project {
			.year {
				text-align: center;
				font-size: 1.2em;
				font-weight: bold;
			}
		}
	}

	.maplibregl-ctrl-bottom-right {
		margin: var.$block-spacing;
		transition: transform var.$trans-slow;
		@extend .panel-control;
		
		.maplibregl-ctrl {
			@extend .panel-control-elem;
			margin: 0;
			padding: var.$elem-spacing;

			& + .maplibregl-ctrl {
				margin-top: var.$block-spacing;
			}

			.maplibregl-ctrl-scale {
				background-color: transparent;
				border-color: color.$default;
				color: color.$default;
				padding: 0;
				text-align: center;
			}

			&:has(.maplibregl-ctrl-compass) {
				@extend .panel-control-icon;
				overflow: hidden;
			}

			.maplibregl-ctrl-compass {
				width: 100%;
				height: 100%;
				
				.maplibregl-ctrl-icon {
					background-color: color.$default-bg-light;
					background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23454545' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23dedede' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E");
					border-radius: var.$block-radius;
				}
			}
		}
	}
}
