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

.has-disturbance::after {
	top: global.$spacing / -2;
	right: global.$spacing * -0.5;
}


@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);

	.m-disturbance-display {
		&.has-disturbance {
			position: relative;

			&.disturbance-position-outer::after {
				top: math.div(global.$spacing, -2);
				right: math.div(global.$spacing, -2);
			}

			&::after {
				content: "";
				position: absolute;
				width: global.$spacing * 2;
				height: global.$spacing * 2;
				background-size: contain;
				z-index: 1;
				top: global.$spacing + 2px;
				left: global.$spacing * 5.75;
				right: unset;
				background-image: url("../../assets/icons/ic_perturb_" + $-theme + ".svg");
			}

			&.disturbance-4 {
				m-logo-lines {
					opacity: 0.54;
				}

				&::after {
					background-image: url("../../assets/icons/ic_hors_service_" + $-theme + ".svg");
				}
			}
		}
	}

	.line-nsv {
		@if $-theme == "dark" {
			background: #221d26;

			&.disturbance-2 {
				background: #714a4a;
			}
			&.disturbance-3 {
				background: #992e2e;
				color: #fff!important;
			}
			&.disturbance-4 {
				background: #5c595f;
			}
		} @else {
			background: #eeeeee;

			&.disturbance-2 {
				background: #f7e5e0;
			}
			&.disturbance-3 {
				background: #b92d00;
				color: #fff!important;
			}
			&.disturbance-4 {
				background: #212121;
				color: #fff!important;
				.text-secondary {
					color: inherit!important;
				}
			}
		}

		height: auto!important;
		border-radius: global.$shape-radius!important;

		.mdc-button__label{
			display: flex;
			flex-direction: row;
			width: 100%;

			.icon-right{
				margin-left: auto;
			}
		}

		&{
			border-radius: global.$shape-radius;
			padding: global.$spacing * 2 global.$spacing * 3;
			margin: global.$spacing * 2;
			display: flex;
			align-items: center;
		}

		.default-display{
			display: flex;
			font-size: 14px;
		}

		m-icons{
			margin-top: auto;
			margin-bottom: auto;

			mat-icon{
				width: global.$spacing*4!important;
				height: global.$spacing*4!important;
				vertical-align: middle;
			}
		}

		div{
			display: flex;
			flex-direction: row;

			.layout{
				line-height: 1.3em;
				text-transform: capitalize;
				font-size: 15px;
				font-weight: normal;
			}
		}

		@media screen and (max-width: 320px) {
			mat-icon:first-of-type {
				display: none;
			}
		}

		.m-disturbance-display-text-secondary{
			opacity: 0.7;
		}
	}

}