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


.mapPlaceholder {
	--border-width: 0.1vh;

	height: calc(100% - 2*var(--border-width));
	width: 50%;

	display: flex;
	align-items: center;
	justify-content: center;

	border: solid var(--neutral-color) var(--border-width);
	border-radius: var(--border-radius);

	background-color: var(--idfm-black);
	font-family: IDFVoyageur-bold;
	font-size: 2vh;
	color: var(--idfm-white);
}

.stopNameInput {
	width: 50%;
	height: 60%;

	display: flex;
	flex-flow: row;

	border: solid var(--neutral-color) calc(0.01vh);
	border-radius: var(--border-radius);

	background-color: transparent;

	.leftAddon {
		width: 17%;

		display: flex;
		align-items: center;
		justify-content: center;

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

	input {
		width: 83%;

		padding-left: 3%;
		padding-right: 3%;
			
		color: var(--idfm-white);
		font-family: IDFVoyageur-regular;
		background-color: transparent;
	}
}

.title {
	@extend %title;
	
	display: flex;
	justify-content: center;
}

.stopSearchMenu {
	@extend %widget;
	
	.body {
		@extend %body;

		flex-direction: row;

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

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

			.displayed {
				display: block;
			}
		}
	}
}