@use "sass:map";
@use "sass:math";
@use "@angular/material" as mat;
@use "../../theme/global" as global;

.affluenceLight{
	display: flex;
	flex-direction: column;
	text-align: center;
	padding: 0 8px;
	margin-right: 16px;
	width: 100%;

	.aff-legend{
		font-size: 12px;
		font-weight: 700;
		line-height: 2rem;
	}
}

mat-list {
	&.m-ui-affluence{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;

		mat-list-item {
			padding: 0;
			height: auto;

			.mdc-list-item__content {
				& > span {
					display: flex !important;
				}

				.icon-content {
					padding: global.$spacing * 2 !important;
					border-radius: global.$spacing 0 0 global.$spacing  !important;
				}

				.desc-content{
					padding: 0 global.$spacing * 2;
				}
			}
		}
	}

	@media screen and (min-width: global.$breakpoint) {
		h1.m-toolbar-title {
			padding-left: global.$spacing * 7;
		}
	}

}


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

	.icon-content, .affluenceLight{
		&.half-light{
			background-color: rgba(map.get($foreground, base), 0.12)!important;
		}

		mat-icon[svgicon="group"] {
			#ic_group_24px,
			#ic_group_24px-2,
			#ic_group_24px-3 {
				fill: map.get($primary-palette, 'default') !important;
				opacity: 30%;
			}
		}

		m-icons{
			&[data-type="forte"] #ic_group_24px,
			&[data-type="forte"] #ic_group_24px-2,
			&[data-type="moderee"] #ic_group_24px-2,
			#ic_group_24px-3 {
				opacity: 100%!important;
			}
		}

	}
}