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

$opacity: 0.54;

@mixin logoBorder($color) {
	border: 4px solid $color;
}

:host {
	position: relative;

	div.m-logo-line-icons {
		position: relative;
		display: flex;
		height: 40px;
		width: 40px;

		&.circle {
			svg.m-logo-line {
				border-radius: 50%;
			}
		}

		&.rectangle {
			width: 60px;
		}

		&.rounded,
		&.rectangle {
			overflow: hidden;

			&:not(&--top) {
				svg {
					border-radius: global.$shape-radius;
				}
			}

			&--top {
				border-top-left-radius: global.$shape-radius;
				border-top-right-radius: global.$shape-radius;
			}
		}


		svg {
			a.relais {
				border: none !important;
			}

			&.checkbox {
				@include logoBorder(transparent);
				transition: all 250ms;
			}

			box-sizing: border-box;
			font-family: Arial,
			serif;
			font-weight:bold;
			user-select: none;

			&.relais {
				position: absolute;
				top: 4px;
				left: 0;
			}

			&.square {
				border-radius: unset;
			}
		}
	}

}


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

	.has-disturbance {

		div.m-logo-line-icons::after {
			content: "";
			background-image: url("../../assets/icons/ic_perturb_" + $-theme + ".svg");
			position: absolute;
			right: -4px;
			top: -2px;
			width: 16px;
			height: 16px;
			background-size: contain;
			z-index: 1;
		}

		&.disturbance-4 {

			div.m-logo-line-icons {
				opacity: $opacity;

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

	.m-logo-line-checkbox {

		div::after,
		.relais {
			opacity: $opacity;
		}

		&.mat-mdc-checkbox-checked {

			.circle {
				border-radius: 50%;
			}

			.rounded,
			.rectangle {
				border-radius: 8px;
			}

			.square {
				border-radius: unset;

			}

			div::after {
				opacity: 1;
			}

			svg {
				opacity: 1 !important;
				transition: all 200ms linear;

				@include logoBorder(map.get($primary-palette, default) !important);

				&.relais {
					border: none !important;
				}

			}

			.m-checklines-favoris label::after {
				opacity: 1 !important;
			}
		}

		.mdc-checkbox {
			display: none;
		}
	}
}