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


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

		cursor: default;
		
		.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 {
					@extend %tramLinePicto;
					@extend %singleLinePicto;
				}

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

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

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

					height: 40%;
				}
			}
		}
	}
}