@use "common";
@use "var";
@use "color";

$thumbnail-max-size: 60px;

#map {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 100%;

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

	.maplibregl-popup-content {
		padding: var.$block-spacing;
		background-color: color.$default-bg-light;

		h1 {
			font-size: 1.4em;
			margin: 0;
			font-weight: bold;
		}

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

		/* Marker Popup */
		.info-window {
			h1 .message-type {
				color: color.$default;
				font-weight: normal;
				font-size: calc(1em / 1.4);
				margin-left: 0.5em;
				vertical-align: middle;
			}

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

				a {
					color: color.$default;
				}
			}

			a.media-link {
				img {
					width: auto;
					height: auto;
					image-orientation: from-image;
					transition: All 0.2s;
					border-radius: var.$block-radius;
				}

				&.drill {
					font-size: 2em;

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

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

			&.message {
				.medias {
					line-height: 0;
					display: grid;
					gap: var.$elem-spacing;
					grid-template-columns: repeat(auto-fill, minmax($thumbnail-max-size, 1fr));
					place-items: center;

					a.media-link {
						&:last-child {
							margin-right: 0;
						}

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

			&.media {
				.coordinates {
					margin: 0;
				}

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

		/* Track Popup */
		.track_tooltip {
			p {
				margin: 0;

				&.description {
					font-size: 1.15em;
				}
			}

			h1, .description {
				@include common.no-text-overflow();
			}
			.body {
				padding-left: calc(1.25em * 1.4 + var.$elem-spacing );
				
				.details {
					margin-top: var.$block-spacing * -1;

					p.detail {
						margin-top: var.$block-spacing;
						width: 50%;
						display: inline-block;
					}
				}
			}
		}
	}
}