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

$trip-basis: 56px !default;
$trip-basis-small: 42px !default;
$input-icon-size: 14px !default;

@mixin override-color($theme) {
	$-theme: map.get($theme, theme);
	$overlay-fn: themes.get-overlay-function($theme);
	$color-config: mat.get-color-config($theme);
	$color-primary: map.get($color-config, primary);
	$foreground: map.get($theme, foreground);

	.time-sheet-dialog {
		mat-dialog-container {
			mat-tab-group {
				mat-tab-header {
					background-color: meta.call($overlay-fn, if($-theme == "dark", 4, 1));
				}
				mat-tab-body {
					background-color: meta.call($overlay-fn, if($-theme == "dark", 0, 8));;
				}
			}
		}
	.contentTad > a:first-of-type, .tad{
		color: mat.get-color-from-palette($color-primary);
		cursor: pointer;
	}
}

.mat-mdc-tab-body-content{
	.content {
		.schedules > li {
			background: meta.call($overlay-fn, if($-theme == "dark", 2, 0));
			&:nth-child(even) {
				background: meta.call($overlay-fn, if($-theme == "dark", 0, 8));
			}
		}
	}
}

	#mfTimeSheetLoader {
		background: #00000000;
		box-shadow: none;
	}
}

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

	.time-sheet-dialog {
		height: 100vh;
		width: 100vw;
		max-width: none !important;

		@media screen and (min-width: 768px) {
			width: 600px;
		}

		// TODO: Should probably handle this in M Theme
		.mdc-dialog__surface {
			padding: 0px !important;
		}

		mat-dialog-container {
			padding: 0;
			border-radius: 0;

			mat-tab-group {
				height: calc(
					100% - #{global.$toolbar-main-nav-height + 46px}
				); // 100% - 1 * toolbar row height + 1 * filter-row (46px).
			}

			.filter-row {
				display: flex;
				margin-bottom: global.$spacing;

				.m-date-form-field {
					margin-right: global.$spacing;
				}
			}
		}
	}

	.time-sheet-container {
		position: relative;

		.content {
			position: static;
		}
		.noContent{
            padding: global.$spacing*2;
        }

		.schedules,
		.trips,
		.pickups {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.schedules {
			width: 100%;
			padding-bottom: global.$spacing * 11;

			mat-icon {
				transform: rotate(90deg) translateX(-100%);
				width: global.$spacing;
				opacity: 0.5;
				overflow: unset;

				&.last {
					opacity: 0;
				}
			}
		}

		.schedules > li {
			margin: 0 global.$spacing;
			padding: global.$spacing;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			position: relative;
			overflow: hidden;
			
			> .mat-icon {
				align-self: center;
			}

			> div {
				min-width: 0;

				&.layout {
					flex: 1;
				}

				> * {
					min-width: 0;
				}
			}
		}

		.stop-name {
			margin: 0;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		.trip {
			display: block;
			padding: 0px;
			text-align: center;
			flex: 0 0 $trip-basis-small;

			&[data-index="0"] {
				font-weight: bold;
			}

			body.light-theme & {
				&:not([data-index="0"]) {
					opacity: 0.7;
				}
			}
			body.dark-theme & {
				&:not([data-index="0"]) {
					opacity: 0.87;
				}
			}
		}

		.trips {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex: 0 0 $trip-basis-small * 3;

			@media screen and (min-width: 376px) {
				flex: 0 0 $trip-basis * 3;

				.trip {
					flex: 0 0 $trip-basis;
				}
			}
		}

		.actions {
			position: absolute;

			bottom: global.$spacing * 2;
			right: global.$spacing * 2;
			display: flex;

			> button:first-of-type {
				margin-right: global.$spacing;
			}
		}

		.text-secondary {
			&.small {
				font-size: global.$default-fz-small - 0.1;

				body.light-theme &
				 {
					opacity: 0.54;
				}
				&.hourLine {
					font-size: global.$default-fz-small;
				}
			}
		}
	}

	.m-date-form-field,
	.m-time-form-field {
		position: relative;

		input {
			&::-ms-clear,
			&::-webkit-clear-button {
				display: none;
			}

			&::-webkit-calendar-picker-indicator {
				width: $input-icon-size;
				opacity: 0;
				height: $input-icon-size;
				margin-left: global.$spacing * -1.25;
				padding: 0;
			}

			&::-webkit-date-and-time-value {
				margin-right: global.$spacing * 2.25;
			}
		}

		mat-icon,
		.mat-form-field-prefix .mat-icon,
		.mat-form-field-suffix .mat-icon {
			font-size: $input-icon-size;
		}
	}

	.m-time-form-field input::-webkit-calendar-picker-indicator {
		margin-left: global.$spacing * 0.5;
	}
}