@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: text-bottom;
			}

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

				a {
					color: color.$default;
				}
			}

			.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 {
					&:last-child {
						margin-right: 0;
					}

					&.drill {
						font-size: 2em;

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

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

					img {
						width: auto;
						height: auto;
						max-width: $thumbnail-max-size;
						max-height: calc($thumbnail-max-size * 2/3);
						border-radius: var.$block-radius;
						image-orientation: from-image;
						transition: All 0.2s;
					}
				}
			}
		}

		/* 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;
					}
				}
			}
		}
	}
}