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

:host {
	flex-direction: column;
	display: flex;
	flex-grow: 1;
	gap: 8px;
	height: 100%;
}

.middle-section,
.content-section {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 8px;
}

.content-section {
	gap: 0px;
	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;
	overflow: hidden !important;
}

.middle-section {
	flex-grow: 65;
	height: 65%;

	.alerts-container {
		overflow-y: auto;
	}

	cr-readability-score {
		border-radius: 10px !important;
		background: #fbffff !important;
		padding: 8px !important;
		display: flex;
		flex-grow: 1 !important;

		::ng-deep {
			.mat-expansion-panel-header {
				border-bottom: none !important;
				padding: 0px !important;
			}
		}
	}
}

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

.alerts-container {
	height: 20%;
}

.results-container {
	height: auto !important;
	flex-grow: 0 !important;
	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;
	background-color: $color-white;

	::ng-deep {
		cr-report-results-item {
			max-width: 313px !important;
		}
		cr-results-actions {
			padding: 8px 8px 0px 8px;
		}
		.report-results-item-top-container {
			padding-bottom: 8px;
		}

		.results-item-top-container {
			&::-webkit-scrollbar {
				width: 0px !important;
				height: 0px !important;
			}
			&::-webkit-scrollbar-thumb {
				border: none !important;
				background: none !important;
				box-shadow: none !important;
			}
		}
	}
}

copyleaks-report-corrections-container {
	height: auto !important;
	flex-grow: 0 !important;
	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;
	background-color: $color-white;

	::ng-deep {
		cr-correction {
			width: 320px !important;
		}
	}
}

cr-assessment-tool-tab-score-panel {
	padding: 8px;
	background-color: $color-white;
	border-radius: 4px;
	flex-grow: 1 !important;
}

.powered-by-copyleaks-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

copyleaks-report-alerts-container {
	overflow-y: auto;
	flex-grow: 0 !important;
	max-height: 25% !important;
	::ng-deep {
		mat-expansion-panel {
			gap: 2px !important;
		}
		mat-expansion-panel-header {
			border-radius: 10px !important;
			background: $color-white !important;
			padding: 4px 8px !important;
		}
		.alert-card-container {
			border: none !important;
		}

		.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover:not([aria-disabled='true']) {
			background: $color-white !important;
		}
	}
}

.mobile-view-ai-logics-container {
	display: flex;
	padding: 4px 14px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	background: $color-white;

	span {
		color: $color-black;
		font-size: 18px;
		font-style: normal;
		font-weight: 800;
		line-height: normal;
	}

	mat-icon {
		color: var(--Black-600, rgba(11, 22, 62, 0.6));
		text-align: center;
		text-shadow: 0px 0px 4px rgba(161, 136, 255, 0.2);
		font-size: 16px;
		width: 16px;
		height: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}
}

cr-ai-phrases-mobile-header {
	background-color: $color-white;
	border-radius: 10px 10px 0px 0px;
	padding: 8px 8px 0px 8px;
}

.ai-results-container {
	::ng-deep {
		.explain-results-mobile-container {
			padding: 8px 0px 8px 0px !important;
		}
		.top-container {
			background: transparent !important;
		}
		.explain-results {
			mat-expansion-panel-header,
			.mat-expansion-panel-body {
				background: $color-white !important;
			}
		}

		.navigate-mobie-button-contaienr,
		.dots-container {
			padding: 0px !important;
			height: auto !important;
			padding-bottom: 4px !important;
		}
	}
}

.report-actions-container {
	::ng-deep .actions-container {
		padding: 0px !important;
	}
}
