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

:host {
	display: flex;
	flex-grow: 1;
	gap: 8px;
}

.assessment-tool-left-section,
.assessment-tool-middle-section {
	display: flex;
	flex-direction: column;
}

.assessment-tool-left-section {
	flex: 65%;
	width: 65%;
	display: flex;
	flex-direction: column;
	copyleaks-report-tabs-container {
		flex-grow: 10;
	}

	copyleaks-content-viewer-container {
		height: 90%;
		flex-grow: 90;
		overflow-y: auto;
	}
}

.assessment-tool-middle-section {
	flex: 25%;
	width: 25%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	box-sizing: border-box;
	@include cls-report-container-close-btn;

	.results-alerts-container {
		display: flex;
		flex-direction: column;
		flex-grow: 100;
		height: auto;
		padding: 8px;
		overflow-y: auto;
		box-shadow: -2px -2px 8px 0px rgba(255, 255, 255, 0.5), 2px 2px 4px 0px rgba(0, 0, 0, 0.15);
		border-radius: 10px;
		gap: 8px;
		background-color: $color-white;
		&.is-real-time {
			background-color: transparent !important;
			box-shadow: none !important;
		}
		copyleaks-report-results-container {
			height: 95%;
			flex-grow: 95;
			overflow-y: auto;
			::ng-deep .report-results-item-top-container {
				height: calc(100% - 48px) !important;
			}
		}

		cr-readability-score {
			flex-grow: 0 !important;
		}

		copyleaks-report-corrections-container {
			height: 95%;
			flex-grow: 95;
			overflow-y: auto;
		}

		.ai-results-container {
			display: flex;
			height: 100%;
		}
	}
}

.web-report-left-section {
	box-shadow: -2px -2px 8px 0px rgba(255, 255, 255, 0.5), 2px 2px 4px 0px rgba(0, 0, 0, 0.15);
	border-radius: 10px;
}

.web-report-left-section {
	flex: 70%;
	width: 70%;
	display: flex;
	flex-direction: column;

	copyleaks-report-tabs-container {
		flex-grow: 10;
	}

	copyleaks-content-viewer-container {
		height: 90%;
		flex-grow: 90;
		overflow-y: auto;
	}
}

.assessment-tool-view {
	border-radius: 10px !important;
	box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.15), -2px -2px 8px 0px rgba(255, 255, 255, 0.5) !important;
}
.web-report-right-section {
	flex: 30%;
	width: 30%;
	min-width: 30%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	box-sizing: border-box;
	@include cls-report-container-close-btn;

	.results-alerts-container {
		display: flex;
		flex-direction: column;
		flex-grow: 100;
		height: auto;
		padding: 8px 8px 0px 8px;
		overflow-y: auto;
		box-shadow: -2px -2px 8px 0px rgba(255, 255, 255, 0.5), 2px 2px 4px 0px rgba(0, 0, 0, 0.15);
		border-radius: 10px;
		gap: 8px;
		background-color: $color-white;
		&.is-real-time {
			background-color: transparent !important;
			box-shadow: none !important;
		}
		copyleaks-report-results-container {
			height: 95%;
			flex-grow: 95;
			overflow-y: auto;
			::ng-deep .report-results-item-top-container {
				height: calc(100% - 48px) !important;
			}
		}

		cr-readability-score {
			flex-grow: 0 !important;
		}

		copyleaks-report-corrections-container {
			height: 95%;
			flex-grow: 95;
			overflow-y: auto;
		}
		.ai-results-container {
			display: flex;
			height: 100%;
		}
	}
	.ai-results-container {
		background-color: transparent;
		box-shadow: none;
		padding: 0 !important;
	}
}

.web-report-left-section {
	box-shadow: -2px -2px 8px 0px rgba(255, 255, 255, 0.5), 2px 2px 4px 0px rgba(0, 0, 0, 0.15);
	border-radius: 10px;
}

copyleaks-report-alerts-container {
	max-height: 50% !important;
	flex-grow: 0 !important;
	padding-bottom: 6px;
}

.custom-results-container {
	display: flex;
	width: 100%;
	overflow-y: hidden;
	margin-top: 8px;
}

.container-with-custom-results {
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	height: auto !important;
}
.ai-alerts-contanier {
	background-color: $color-white;
	border-radius: 10px;
	padding: 8px;
}

.assessment-tool-alerts-contanier {
	padding: 0px !important;
}

.cr-correction-container {
	height: 95%;
	flex-grow: 95;
	overflow-y: auto;
}

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

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

cr-assessment-tool-tab-score-panel {
	flex-grow: initial !important;
}

.ai-results-container.assessment-tool-view {
	display: flex;
	height: 95%;
	flex-grow: 95;
	overflow-y: auto;
	box-shadow: none !important;
}
