@use "../_common";
@use "../_utils";


.map {
	position: relative;

	height: 100%;
	width: 50%;

	.ol-viewport {
		@extend %body;
		position: absolute;
		margin: 0;
	}

	.popup {
		@extend %body;
		margin: 0;

		position: absolute;
		width: 100%;
		height: 35%;

		border: solid var(--idfm-white) calc(0.2*1vh);

		background-color: var(--idfm-black);

		z-index: 1;
		visibility: hidden;

		.header {
			@extend %header;

			color: var(--idfm-white);
		}

		.body {
			@extend %body;

			scroll-snap-type: y mandatory;
			overflow-y: scroll;

			.line {
				scroll-snap-align: center;

				height: calc(100% / 3);
				margin: 0 calc(10/1920*100%);

				display: flex;
				flex-direction: row;
				align-items: center;

				font-family: IDFVoyageur-bold;

				.busLinePicto {
					@extend %busLinePicto;

					height: 80%;
					width: 30%;
				}

				.name {
					width: 100%;
					height: 60%;
				}

				div {
					height: 100%;

					svg {
								max-width: 100%;
								max-height: 100%;
					}
				}
			}
		}

		.footer {
			@extend %footer;
		}
	}

	.displayed {
		visibility: visible;
	}
}