@use 'sass:map';
@use 'sass:math';

@use "@angular/material" as mat;
@use '../global/index' as global;
@use '../themes/index' as themes;

/********************************************************************************
 * Override the material design toolbar style.
 * Also provides m-toolbar and m-toolbar-row for slightly styled toolbar.
 * If the m-toolbar-row is used, make sure to add the multiline class on the
 * m-toolbar wrapper.
 *
 * Available classes on mat-toolbar-row and m-toolbar-row:
 *   - align-end => Align children to the bottom of the row.
 *   - no-padding => remove the row padding.
 *
 ********************************************************************************/

@mixin override-color($theme) {
	$-theme: map.get($theme, theme);
	$color-config: mat.get-color-config($theme);
	$accent-palette: map.get($color-config, accent);

	.mat-toolbar,
	.m-toolbar {
		@if $-theme == "dark" {
			background: themes.dark-color-overlay(16);
		} @else if $-theme == "light" {
			background: themes.light-color-overlay(0);
		}

		a {
			color: map.get(map.get($theme, foreground), text);

			&.active {
				color: map.get($accent-palette, default);
			}
		}
	}

	@if $-theme == "dark" {
		body {
			&.dark-theme {
				.mat-toolbar,
				.m-toolbar {
					&.main-navigation,
					&.bottom-navbar {
						background: themes.dark-color-overlay(0);
					}
				}
			}
		}
	}
}

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

	.m-toolbar {
		display: flex;
		box-sizing: border-box;
		padding: 0 global.$spacing * 2;
		width: 100%;

		&.multiline {
			flex-direction: column;
		}

		&:not(.multiline) {
			flex-direction: row;
			align-items: center;
			white-space: nowrap;
		}

		.m-toolbar-row {
			display: flex;
			flex-direction: row;
			align-items: center;
			white-space: nowrap;
		}
	}

	.mat-toolbar,
	.m-toolbar {
		position: relative;
		z-index: 1;

		h1, h2, h3, h4, h5, h6 {
			letter-spacing: 0.0125em;
		}

		.mat-toolbar-row,
		.m-toolbar-row {
			&.align-end {
				align-items: flex-end;
			}

			&.no-padding {
				padding: 0;
			}

			& .mat-mdc-icon-button {
				padding: 0;
				min-width: 0;
				width: 40px;
				height: 40px;
				flex-shrink: 0;
				line-height: 48px;
				border-radius: 50%;
			}
		}

		&.main-navigation {
			&.bottom-navbar {
				.burger-menu-desktop {
					z-index: 12;
					display: none;
				}

				bottom: 0;

				a {
					height: 64px;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
			}

			&.top-navbar {
				top: 0;

				.mat-icon {
					margin-right: global.$spacing;
				}

				a {
					height: 48px;
					flex-direction: row;
					align-items: center;
					justify-content: center;
				}
			}

			position: fixed !important;
			z-index: 2;
			justify-content: space-around;
			align-items: center;
			box-shadow: 0 -4px 16px rgba(black, 0.35);

			a {
				display: flex;
				line-height: 11px;
				font-weight: 400;
				text-decoration: none;
				text-align: center;
				text-decoration: none;
				transition: all 200ms;
				flex-basis: 80px;
				height: global.$toolbar-main-nav-height;

				.mat-icon {
					padding: 0;
				}

				&.active {
					opacity: 1;
					font-size: 13px;
					line-height: 13px;
				}
			}
		}

		&.simple {
			padding-left: global.$spacing * 4 + 40px;

			&.multiline {
				padding: 0;

				.m-toolbar-row:nth-child(1) {
					padding-left: global.$spacing * 4 + 40px;
				}
			}
		}

		&.with-mat-tab {
			padding: 0;
		}

		.m-toolbar-title {
			font-size: global.$header-fz-big;
			font-weight: bold;
			line-height: global.$toolbar-height + global.$spacing;
			margin: 0;
			flex: 1;
		}
	}

	@media screen and (max-width: 1080px) {
		.main-navigation {
			a {
				font-size: 0.9em;
				flex-direction: column;
			}
		}
	}

	@media screen and (min-width: 1080px) {
		.main-navigation {
			a {
				opacity: 1;
			}
		}
	}
}