@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 {
				// display: None;
				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 {
						width: 60%;

						font-family: IDFVoyageur-bold;
					}

					.lineRepr {
						// height: 100%;
						width: 40%;
						aspect-ratio: 2.5;
						// margin-left: auto;

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

						.transportMode {
							@extend %transportMode;

							height: 50%;
						}

						.break {
							flex-basis: 100%;
							height: 0;
						}

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

							display: flex;
							flex-flow: row;
							flex-wrap: wrap;
							// justify-content: space-around;

							// .break {
							// 	flex-basis: 100%;
							// 	height: 0;
							// }

 							%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 {
								@extendnd %metroLinePicto;
								@extend %singleLinePicto;
							}

							.busLinePicto {
								@extend %busLinePicto;
								@extend %picto;
							}
						}
					}
				}
				// .stop:last-child {
				// 	border-bottom: 0;
				// 	/* to make up for the bottom border deletion */
				// 	padding-bottom: calc(2px);
				// }
			}
			.displayed {
				display: block;
			}
		}

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

	// .lineTable {
	// 	height: 100%;
	// 	width: 50%;

	// 	tr {
	// 		height: 100%;

	// 		display: flex;
	// 		flex-flow: row;
	// 	}

	// 	td {
	// 		height: 100%;

	// 		display: flex;
	// 		flex-flow: row;
	// 	}
	// }

	// .stop {
	// 	height: 100%;

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

	// 	.lineRepr {
	// 		height: 100%;
	// 		aspect-ratio: 5;

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

	// 		.break {
	// 			flex-basis: 100%;
	// 			height: 0;
	// 		}


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

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

	// 			.break {
	// 				flex-basis: 100%;
	// 				height: 0;
	// 			}

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

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

	// 			.tramLinePicto {
	// 				@extendnd %tramLinePicto;
	// 				@extend %picto;
	// 			}

	// 			.trainLinePicto {
	// 				@extend %trainLinePicto;
	// 				@extend %picto;
	// 			}

	// 			.metroLinePicto {
	// 				@extendnd %metroLinePicto;
	// 				@extend %picto;
	// 			}

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