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


.passagesDisplay {
	@extend %widget;

	.header {
		$header-element-height: calc(80/100*100%);
		$component-border: solid var(--idfm-white) calc(0.25*1vh);
		$component-border-radius: calc(9/86*100%);
		.transportMode {
			@extend %transportMode;

			height: 100%;
			margin: 0;
			margin-right: calc(23/1920*100%);
		}

		.title {
			@extend %title;
		}

		.menu {
			aspect-ratio: 0.75;
			height: $header-element-height;

			margin-right: calc(30/1920*100%);
			margin-left: auto;
			border: $component-border;
			border-radius: $component-border-radius;

			button {
				height: 100%;

				border: 0;
				color: var(--idfm-white);
				background-color: transparent;

				.iconHamburgerMenu {
					width: 75%;
				}
			}
		}

		.clock {
			width: calc(175/1920*100%);
			height: $header-element-height;

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

			border: $component-border;
			border-radius: $component-border-radius;

			svg {
				aspect-ratio: 2.45;
				height: calc(0.7*100%);
			}
		}
	}

	.body {
		@extend %body
	}
}