@import '../../../styles/website-colors.styles.scss';
@import '../../../styles/containers.styles.scss';

:host {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	flex-grow: 65;
	gap: 10px;

	cr-results-actions[dir='rtl'].is-desktop {
		padding: 0px 0px 6px 6px;
	}

	[dir='rtl'] {
		::ng-deep {
			.total-corrections-container {
				::ng-deep {
					mat-icon {
						transform: scaleX(-1);
					}
				}
			}

			.all-corrections-info-container.desktop-scroll {
				direction: ltr;
				::ng-deep {
					.cdk-virtual-scroll-content-wrapper {
						direction: rtl;
						box-sizing: border-box;
						padding-inline-end: 0px !important;
						padding-inline-start: 5px !important;
					}
				}
			}
		}
	}

	.custom-empty-results-container {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow-y: auto;
	}

	.corrections-types-container {
		display: flex;
		flex-direction: column;
		gap: 8px;
		height: auto !important;
	}

	.categorized-summery {
		color: $color-grayed-out;
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
	}

	.selected-category-toolbar {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 12px 0px 12px 0px;
		border-bottom: 1px solid $color-container-background;

		.total-corrections-container {
			display: flex;
			padding: 0px 8px 0px 0px;
			align-items: center;
			gap: 4px;
			cursor: pointer;
			border: none !important;
			background: transparent;
			margin: 0px;

			.all-correction-title,
			.left-arrow {
				color: $color-dark-blue;
				transition: 0.4s;
			}
			.left-arrow {
				$icon-size: 18px;
				width: $icon-size;
				height: $icon-size;
				font-size: $icon-size;
				position: relative;
				inset-inline-start: -3px;
			}
			.all-correction-title {
				font-size: 14px;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
				white-space: nowrap;
			}
		}

		.total-corrections-container:hover {
			.all-correction-title,
			.left-arrow {
				color: $color-primary !important;
			}
		}

		.selected-correction-container {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			gap: 4px;
			.correction-title,
			.right-arrow {
				color: $color-primary;
			}
			.right-arrow {
				$icon-size: 18px;
				width: $icon-size;
				height: $icon-size;
				font-size: $icon-size;
			}
			.correction-title {
				text-overflow: ellipsis;
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
			}
		}
	}
	.all-corrections-info-container {
		width: 100%;
		height: 100%;
		::ng-deep .cdk-virtual-scroll-content-wrapper {
			width: 100%;
			gap: 8px;
			display: flex;
			flex-direction: column;
			> cr-correction {
				height: 40px !important;
			}
		}
	}

	.custom-results-container {
		height: 175px;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow-y: auto;
	}

	.custom-results-container-mobile {
		::ng-deep cr-custom-results {
			width: 313px;
		}
	}

	cr-results-actions {
		width: 100%;
	}

	.container-text {
		text-align: center;
		display: flex;
		align-items: center;
	}

	.report-results-item-top-container {
		width: 100%;
		height: 90%;
		flex-grow: 90;
		display: flex;
		flex-direction: column;
		gap: 8px;
		align-items: center;
		justify-content: flex-start;

		&[dir='rtl'] {
			::ng-deep {
				.desktop-scroll {
					direction: ltr;
					::ng-deep .cdk-virtual-scroll-content-wrapper {
						direction: rtl;
						box-sizing: border-box;
						padding-inline-end: 0px !important;
						padding-inline-start: 5px !important;
					}
				}
			}
		}

		.navigate-mobie-button-contaienr {
			.navigate-mobie-button-select {
				background-color: $color-primary !important;
			}

			.navigate-mobie-button {
				width: 12px !important;
				height: 12px !important;
				padding: 0px !important;
				border-radius: 50%;
				background-color: $color-dialog-background;
				border: 0px;
			}

			.mat-chip-navigate {
				font-size: 12px;
				font-weight: 500;
				color: $color-white;
				background-color: $color-dark-blue;
				padding: 2px 8px !important;
				height: fit-content !important;
				min-height: auto !important;
				line-height: normal !important;
				border-radius: 16px !important;
			}
		}

		.results-item-top-container {
			display: flex;
			align-items: flex-start;
			width: 100%;
			height: 100%;
			overflow: auto;
			.results-item-mobile-container {
				width: 100%;
				height: 189px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				div,
				cr-report-results-item {
					height: 100%;
				}
				cr-report-results-item {
					min-width: 313px;
					::ng-deep .result-item-container {
						justify-content: space-between !important;
						height: 100%;
					}
				}
			}
			.results-item-container {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				gap: 8px;
				width: 100%;
				height: 100%;
				min-height: 285px;
			}
		}
	}

	cr-empty-result-state {
		width: 100%;
		height: 100%;
	}

	.alerts-loader-container {
		width: 100%;
		overflow-y: auto;
	}

	.desktop-scroll {
		width: 100%;
		height: 100%;
		padding-inline-end: var(--scrollbar-offset, 0px);
		overflow-y: auto;
		::ng-deep .cdk-virtual-scroll-content-wrapper {
			width: 100%;
			gap: 8px;
			display: flex;
			flex-direction: column;
			> div {
				height: 189px;
				cr-report-results-item {
					height: 100%;
					.result-item-container {
						height: 100%;
						justify-content: space-between !important;
					}
				}
			}
		}
	}

	.mobile-scroll {
		height: 100%;
		width: 100%;
		overflow-y: hidden;
		overflow-x: unset;
		&::-webkit-scrollbar {
			width: 0px !important;
			height: 0px !important;
		}

		::ng-deep .cdk-virtual-scroll-content-wrapper {
			display: flex;
			flex-direction: row !important;
			gap: 8px;
			> div {
				height: 189px !important;
				cr-report-results-item {
					height: 100% !important;
					.result-item-container {
						height: 100% !important;
						justify-content: space-between !important;
					}
				}
			}
		}
	}

	.scroll-with-padding {
		::ng-deep .cdk-virtual-scroll-content-wrapper {
			padding-inline-end: 5px !important;
			box-sizing: border-box;
		}
	}

	.real-time-result {
		height: 189px;
		::ng-deep {
			.result-item-container {
				height: 100% !important;
				justify-content: space-between !important;
			}
		}
	}

	.selected-category-container {
		display: flex;
		flex-direction: column;
		gap: 4px;
		height: 100%;
		width: 100%;
		box-sizing: border-box;
		min-height: 257px;
	}
}
