@import '../../../styles/styles.scss';
@import '../../../styles/website-colors.styles.scss';
@import '../../../styles/cls-mat-components-overrides/cls-mat-expansion-panel-overrides.scss';

:host {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
	flex-grow: 25;

	[dir='rtl'] {
		::ng-deep {
			::-webkit-scrollbar {
				direction: ltr;
			}
			.mat-expansion-panel-content {
				direction: ltr;
			}

			.container-alerts {
				direction: rtl;
			}
			.item-with-padding {
				padding-inline-end: 0px !important;
				padding-inline-start: 5px !important;
			}
		}
	}

	.container-title {
		display: flex;
		flex-direction: row;
		gap: 16px;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;

		mat-icon {
			$icon-size: 24px;
			font-size: $icon-size;
			width: $icon-size;
			height: $icon-size;
			color: $color-error;
		}

		.title {
			color: $color-black;
			font-size: 18px;
			font-style: normal;
			font-weight: 700;
			margin: 0;
		}
	}

	.container-alerts {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 8px;
		overflow-x: hidden;
		width: 100%;

		cr-alert-card {
			width: 100%;
		}
	}

	.hide-alerts-icon {
		$icon-size: 24px;
		font-size: $icon-size;
		width: $icon-size;
		height: $icon-size;
		color: $color-black;
		cursor: pointer;
		margin-inline-start: 12px;
		transition: transform 0.2s ease-in-out;
	}

	.hide-alerts-icon:hover {
		color: $color-primary;
	}

	.container-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	::ng-deep {
		.mat-expansion-panel-content {
			display: flex;
			overflow-y: auto;
			max-height: 100%;
			@media screen and (min-width: 960px) {
				max-height: 100%;
			}
		}

		/* Hide default toggle icon */
		.mat-expansion-panel-header .mat-expansion-indicator::after {
			border: none;
			content: '';
		}

		.mat-expansion-indicator {
			display: none !important;
		}

		mat-panel-description {
			margin-inline-end: 0px !important;
			justify-content: end;
		}

		.mat-expansion-panel-header[aria-expanded='true'] .hide-alerts-icon {
			transform: rotate(180deg);
		}

		.mat-expansion-panel-header {
			padding-inline-end: 0px !important;
		}
	}

	mat-accordion {
		width: 100%;
		height: 100%;
		display: flex;
	}

	::ng-deep .mobile-results-panel-header {
		padding: 8px !important;
	}

	.item-with-padding {
		padding-inline-end: 5px !important;
		box-sizing: border-box !important;
	}
}
