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

@mixin override-color($theme) {
	$-theme: map.get($theme, theme);
	$overlay-fn: themes.get-overlay-function($theme);
	.legs-grid {
		.deco {
			.intermediate-icon {
				line {
					stroke: meta.call($overlay-fn, 0);
					stroke-width: 4;
				}
			}

			.deco-bar {
				&.default {
					border: 2px dashed meta.call($overlay-fn, if($-theme == "dark", 8, 16));
				}
			}

			.stop {
				border-radius: 50%;
				.stop-content {
					background: if($-theme == "dark", #000, #fff);
				}
			}
		}
	}
}

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

	.legs-grid {
		display: inline-grid;
		// The minmax function and min-X properties fixes content overflow parent cells width issue.
		grid-template-columns: 40px 60px minmax(0, 1fr);
		grid-template-rows: auto;
		min-height: 0;
		min-width: 0;
		width: 100%;
		padding: global.$spacing * 2 0;

		.toggle-button {
			left: global.$spacing * -2;

			&.stops{
				text-transform: lowercase;
			}
			.mat-button-wrapper {
				display: flex;
				align-items: center;

				> span {
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.logo-mco {
				height: 28px;
				width: auto;
			}
		}

		.hourLine {
			font-size: global.$default-fz;
			opacity: 0.7;
			margin: 0;
			text-align: center;

			&.after {
				padding-top: global.$spacing *3.25;

				&.non-transit[aria-hidden="true"] {
					padding-top: 0;
				}
			}
			&.firstHour{
				padding-top: global.$spacing * 4.9;
			}
		}

		.deco {
			position: relative;
			&.after {
				padding-top: global.$spacing * 3;

				&.non-transit[aria-hidden="true"] {
					padding-top: 0;
				}
			}

			&.noTrail{
				padding: 0;
				height: 10px;
			}

			.deco-bar {
				position: absolute;
				bottom: 0;
				left: 50%;
				height: 100%;
				width: 6px;
				transform: translateX(-50%);
				z-index: 1;

				&.default {
					width: 0;
					z-index: 0;
				}

				&.start {
					border-top-left-radius: global.$shape-radius;
					border-top-right-radius: global.$shape-radius;
					height: 8px;
				}

				&.previous {
					border-bottom-left-radius: global.$shape-radius;
					border-bottom-right-radius: global.$shape-radius;
					height: 8px;
					bottom: calc(100% - 8px);
				}

				&.end {
					border-bottom-left-radius: global.$shape-radius;
					border-bottom-right-radius: global.$shape-radius;
					height: 50%;
					bottom: 50%;
				}

				&.has-previous {
					height: 8px;
				}
			}

			.mat-icon {
				font-size: global.$default-fz;
				line-height: global.$default-fz;
				height: global.$default-fz;
				width: global.$default-fz;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 60%;
				left: 50%;
				transform: translate(-50%, -50%);

				&.walk {
					height: global.$default-fz * 2;
					width: 100%;
					font-size: global.$default-fz * 2;
					line-height: global.$default-fz * 2;
				}
			}

			.stop {
				$stop-size: 22px;

				height: $stop-size;
				width: $stop-size;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: (global.$spacing * 3) - 1;
				left: 50%;
				z-index: 1;
				transform: translateX(-50%);

				.stop-content {
					height: $stop-size - 10px;
					width: $stop-size - 10px;
				}

				&.intermediate {
					$intermediate-size: $stop-size - 10px;

					height: $intermediate-size;
					width: $intermediate-size;
					top: 3px;

					.stop-content {
						height: $intermediate-size - 6px;
						width: $intermediate-size - 6px;
					}

					&.collapsed {
						opacity: 0;
					}
				}
			}

			&.leg {
				.stop {
					top: -1px;
				}
			}

			.icon-start {
				position: absolute;
				top: global.$default-fz *3.5;
				left: 50%;
				transform: translateX(-50%);
			}

			.icon-end {
				position: absolute;
				top: calc(50% + 10px);
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.intermediate-icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.row-content:not([aria-hidden="true"]) {
			width: 100%;

			&.alignInfos{
				padding: global.$spacing * 0.8 0 global.$spacing * 1.8 0;
			}

			&.intermediates {
				padding: global.$spacing * 3 0 global.$spacing 0;
			}

			.intermediate-name {
				padding: math.div(global.$spacing, 2);
				font-size: global.$default-fz;

			}

			&.before {
				padding: global.$spacing * 4 0 global.$spacing 0;
				:has(.relais){
					padding: 0 0 global.$spacing 0;
				}

				&.previous-non-transit {
					padding: 0 0 global.$spacing 0;
				}

				&.start {
					padding-top: global.$spacing * 4.7;
				}
			}

			&.leg.no-intermediates {
				padding-bottom: global.$spacing * 5;
			}

			&.after {
				padding-top: global.$spacing * 3;
			}

			p {
				margin: 0;
			}

			a.m-theme {
				margin-top: global.$spacing;
			}
			.higherFontSize{
				font-size: global.$spacing * 2;
			}
		}

		.mco-wrapper {
			margin-bottom: global.$spacing;
			padding: global.$spacing global.$spacing global.$spacing 0;

			p {
				margin-bottom: math.div(global.$spacing, 2);

				&:not(:first-of-type) {
					margin-top: global.$spacing;
				}
			}
		}

		.non-transit {
			&.trail{
				padding: global.$spacing * 3.5 0 global.$spacing 0;
				font-size: 14px;
			}
		}
	}

	.tad-link {
		margin: global.$spacing 0;

		&.tad-phone{
			mat-icon {
				font-size: global.$default-fz;
				margin-right: global.$spacing;
			}
		}

		mat-icon {
			height: 20px;
			width: 20px;
			line-height: 20px;
		}

		.tad-link-label {
			@media screen and (max-width: 375px) {
				> span {
					display: none;
				}
			}
		}
	}
}