@use "_common";
@use "_utils";

.stopSearchMenu {
	@extend %widget;

	.inputGroup {
		width: 50%;
		// height: 5%;

		// TODO: Setup hop-ui to avoid to have to overrride rules.
		input {
			color: var(--idfm-white);
			font-family: IDFVoyageur-regular;
		}
	}

	.title {
		@extend %title;

		display: flex;
		justify-content: center;
	}

	.body {
		@extend %body;

		flex-direction: row;

		.stopsPanels {
			width: 50%;
			height: 100%;

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

			.stopPanel {
				scroll-snap-align: center;

				.stop {
					width: calc(1880/1920*100%);
					height: calc(100% / 5);
					// margin: 0 calc(20/1920*100%);
					margin: 0 calc(10/1920*100%);

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

					/* TODO: compute the border weight according to the parent height */
					/* TODO: Disable border-bottom for the last .line  */
					border-bottom: solid calc(2px);

					.name {
						margin-left: calc(40/1920*100%);
						width: 60%;
						aspect-ratio: 2.5;

						display: flex;
						align-items: center;

						font-family: IDFVoyageur-bold;
					}

					.lineRepr {
						width: 40%;
						aspect-ratio: 2.5;

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

						.transportMode {
							@extend %transportMode;

							height: 50%;
						}

						.linesRepresentationMatrix {
							@extend %busLinePicto; // Use the larger picto aspect-ratio
							width: 75%;
							aspect-ratio: 3;

							display: flex;
							flex-flow: row;
							flex-wrap: wrap;

 							%picto {
								margin-left: 1%;
								align-self: center;
								justify-self: center;
							}

							%singleLinePicto {
								@extend %picto;

								height: 80%;
							}

							.transportMode {
								@extend %transportMode;
								@extend %picto;
							}

							.tramLinePicto {
								@extendnd %tramLinePicto;
								@extend %singleLinePicto;
							}

							.trainLinePicto {
								@extend %trainLinePicto;
								@extend %singleLinePicto;
							}

							.metroLinePicto {
								@extend %metroLinePicto;
								@extend %singleLinePicto;
							}

							.busLinePicto {
								@extend %busLinePicto;
								@extend %picto;

								height: 40%;
							}
						}
					}
				}
			}
			.displayed {
				display: block;
			}
		}

		.map {
			height: 100%;
			width: 50%;
		}
	}
}