@use "@styles/common";
@use "@styles/var";
@use "@styles/color";

$thumbnail-max-size: 60px;

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

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

	.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;

			span.hitchhiking {
				font-size: calc(1em / 1.4 * 1.2);
				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;
		}

		.medias-list {
			line-height: 0;
			
			a.media-link {
				img {
					width: auto;
					height: auto;
					image-orientation: from-image;
					transition: All 0.2s;
					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%;
				}
			}
		}
	}
}