@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 list style.
 *
 * The "m-theme" class is required on the mat-list component to use the right theme.
 * Available classes on mat-list/mat-action-list/ect...:
 *   - flat => remove the box shadow on each expansion panels.
 *   - important => add border radius and more spacing on each list items.
 *   - no-padding => remove the list wrapper padding.
 *
 * Available classes on mat-list-item:
 *   - double-action => Suitable for mat-list-item containing a link and an action button.
 *                      In this case, the original padding is applied to the link element.
 *   - no-padding => Remove the mat-list-item-content padding.
 *
 ********************************************************************************************/

$spacing: global.$spacing !default;
$icon-size: 32px !default;
$two-line-height: 72px !default;
$shape-radius: 8px !default;
$item-fz: global.$default-fz !default;
$item-fz-secondary: global.$default-fz-small !default;

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

	//List bottom sheet.
	.mat-mdc-action-list.mdc-list {
		.mdc-list-item--with-trailing-meta {
			.mdc-list-item__end {
				color: map.get(map.get($color-config, "foreground"), text);
			}
		}
	}

	.mat-mdc-list-base {
		.mdc-list-item.mdc-list-item--with-trailing-meta {
			.mdc-list-item__end {
				color: map.get(map.get($color-config, "foreground"), text);
			}
		}

		&.basic {
			.mat-mdc-list-item {
				background: transparent;
				box-shadow: none;
			}
		}

		.mat-mdc-list-item {
			a[mat-line],
			button[mat-line] {
				color: map.get(map.get($color-config, "foreground"), text);
			}

			.mat-line:not(:first-of-type),
			.sub-line {
				opacity: if(map.get($theme, theme) == "dark", 0.7, 0.87);
			}

			&:focus,
			a[mat-line]:focus,
			button[mat-line]:focus {
				border: 1px solid rgba(mat.get-color-from-palette($primary-palette), 0.5);
			}

			.mat-icon {
				//TODO : Check the colors.
				fill: map.get($color-config, "text");
				color: map.get($color-config, "text");
			}
		}

		&.mat-mdc-nav-list {
			.mat-mdc-list-item {
				&.active {
					background: rgba(mat.get-color-from-palette($primary-palette), 0.2);
					color: mat.get-color-from-palette($primary-palette);
				}
			}
		}

		&.ghost {
			li {
				@if map.get($theme, theme) == "dark" {
					background: themes.dark-color-overlay(1);
				} @else {
					background: themes.light-color-overlay(16);
				}
			}
		}
	}
}

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

	@if $color-config != null {
		@include override-color($theme);
	}

	.mat-mdc-list-base, .mdc-list {
		a {
			text-decoration: none;

			&:not(.mco-item) > m-icons {
				color: inherit;
			}
		}

		.mdc-list-item__content {
			button.mat-mdc-icon-button {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0;
				padding: 0;
			}
		}
	}

	.mat-mdc-list-item-title,
	.mat-mdc-list-item-line,
	.mdc-list-item__primary-text {
		letter-spacing: normal;

		&.item-name {
			opacity: 1;
		}
	}

	.mat-mdc-list-base,
	.mat-mdc-action-list {
		padding: $spacing;

		.mat-mdc-list-item {
			@include mat.elevation(1);
			font-size: $item-fz;
			line-height: $item-fz;
			overflow: hidden;
			padding: 0 $spacing * 2;
			align-items: center;

			&:not(:last-of-type) {
				margin-bottom: math.div($spacing, 4);
			}

			&,
			a[mat-line],
			button[mat-line] {
				border: 1px solid transparent;
				transition: border 250ms;
			}

			a[mat-line],
			button[mat-line] {
				background: transparent;
				text-align: left;
			}

			&:focus,
			a[mat-line]:focus,
			button[mat-line]:focus {
				outline: none;
			}

			&.mdc-list-item--with-leading-icon .mdc-list-item__content {
				padding-left: $spacing * 2;
			}

			&.mat-mdc-list-item-interactive {
				.mdc-list-item__secondary-text:last-child {
					display: flex;
				}
			}

			&.mdc-list-item--with-one-line {
				.mdc-list-item__end {
					align-self: center;
				}
			}

			.mat-mdc-list-item-meta {
				display: flex;
				justify-content: center;
				align-self: center;
				margin-right: 0;
			}

			.mat-icon:not(.mat-icon.icon-left-large, .mat-icon.icon-left-very-large) {
				color: unset;
				height: $icon-size;
				width: $icon-size;
				line-height: $icon-size;
				font-size: $icon-size;
				margin: 0;
				align-self: inherit;
			}

			.mat-line:not(:first-of-type),
			.sub-line {
				font-size: $item-fz-secondary;
				line-height: $item-fz-secondary;
				margin-top: math.div($spacing, 2);
			}

			&.double-action {
				position: relative;
				padding: 0;

				.mat-line[mat-ripple] {
					position: relative;
					height: 100%;
					display: flex;
					align-items: center;
				}

				a.mat-line,
				button.mat-line {
					padding-left: $spacing * 2;
					padding-right: 40px + ($spacing * 1.5);
				}

				.mdc-list-item__content {
					height: 100%;

					*[mat-ripple] {
						width: 100%;
						height: 100%;
						position: relative;
						display: flex;
						align-items: center;
					}
				}

				&.m-2-line {
					height: $two-line-height;
				}

				mat-icon, button {
					padding: 0;
				}

				a[mat-ripple],
				button[mat-ripple] {
					padding-left: $spacing * 2;
					padding-right: 40px + ($spacing * 1.5);
				}

				button[mat-icon-button],
				a[mat-icon-button] {
					position: absolute;
					top: 50%;
					right: $spacing;
					transform: translate(0, -50%);
				}
			}

			.mat-mdc-list-item-title {
				font-size: $item-fz;
				line-height: $item-fz;
			}

			.mat-mdc-list-item-line {
				&:not(.mco-item) {
					font-size: $item-fz-secondary;
					line-height: $item-fz-secondary;
				}

				&.mco-item {
					font-size: 14px;
					font-weight: 500;
				}
			}
		}

		&.flat {
			.mat-mdc-list-item {
				box-shadow: none;

				&:not(:last-of-type) {
					margin-bottom: 2px;
				}
			}
		}

		&.squared {
			.mat-mdc-list-item {
				border-radius: 0px;
			}
		}

		.mat-mdc-list-item {
			&,
			a[mat-line],
			button[mat-line] {
				border-radius: $shape-radius;
			}

			&:not(:last-of-type) {
				margin-bottom: $spacing;
			}
		}
	}

	.mat-mdc-action-list {
		.mat-mdc-list-item {
			@include mat.elevation(0);
		}
	}

	.m-list {
		&.ghost {
			padding: $spacing;
			margin: 0;
			list-style: none;

			li {
				height: $two-line-height;
				border-radius: $shape-radius;

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