@use "sass:math";
@use "sass:meta";
@use "@angular/material" as mat;
@use "@metromobilite/m-ui/theme/global";
@use "@metromobilite/m-ui/theme/themes";

$lower-leg-light-color: map_get(mat.$grey-palette, 300) !default;

@mixin override-color($theme) {
	$overlay-fn: themes.get-overlay-function($theme);
	.itinerary-content {
		.lower-leg {
			background: meta.call($overlay-fn, 16);
		}
	}
}

@mixin override-theme($theme) {
	$color-config: mat.get-color-config($theme);
	@if $color-config != null {
		@include override-color($theme);
	}

	.itinerary-content {
		&.mat-accordion.m-theme .mat-expansion-panel .mat-expansion-panel-header {
			padding: global.$spacing * 2 global.$spacing * 2;
		}

		.full-width {
			width: 100%;
		}

		.more-actions-button {
			height: 36px;
			width: 40px;
			min-width: 40px;
			padding: 0;
		}

		.mat-icon {
			&[svgicon="RAIL"] {
				height: global.$spacing * 3;
			}
			width: global.$spacing * 3;
		}

		.time {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;
			font-size: global.$default-fz;
			line-height: global.$default-fz;

			.mat-icon {
				height: global.$default-fz;
				width: global.$default-fz;
				font-size: global.$default-fz;
				line-height: global.$default-fz;
				margin: 0 global.$spacing;
			}
		}

		.driver-info {
			$driver-picture-size: 40px;

			.driver-picture {
				width: $driver-picture-size;
				border-radius: 50%;
				margin-right: 16px;
			}
			mat-icon.driver-picture {
				height: $driver-picture-size;
				font-size: $driver-picture-size;
				line-height: $driver-picture-size;
			}

			.badge {
				border-radius: global.$shape-radius * 3;
				padding: global.$spacing global.$spacing * 2;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 100px;
					height: auto;
					display: block;
				}
			}
		}

		.legs-wrapper,
		.driver-info {
			padding-top: global.$spacing * 2;
		}

		.legs-wrapper {
			overflow-x: auto;
			padding-bottom: global.$spacing;
		}

		mf-itinerary-content-leg {
			display: block;
			white-space: nowrap;
			&:not(:first-of-type) {
				margin-left: math.div(global.$spacing, 2);
			}
		}

		.leg-type {
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
			align-content: space-between;
		}

		.upper-leg {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
			font-size: global.$default-fz;
			padding: 0 global.$spacing;

			span {
				&.has-disturbance {
					width: 18px;
					height: 18px;
					&::after {
						top: 0px;
						left: 0px;
					}
				}
			}
		}

		.lower-leg {
			height: 32px;
			border-radius: global.$shape-radius;
			font-size: global.$default-fz - 0.3rem;
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
			align-content: space-between;
			padding: 0 global.$spacing;
			width: 100%;
			min-width: 60px;
			box-sizing: border-box;
		}

		.text-align-right {
			text-align: right;
		}
	}
}