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

.top-container {
	width: 100%;
	border-radius: 10px;

	&.default-view {
		background: none !important;
		box-shadow: none !important;
		gap: 8px !important;
	}

	&[dir='rtl'] {
		::ng-deep {
			.desktop-scroll::-webkit-scrollbar,
			.desktop-scroll {
				direction: ltr;
			}

			.explain-results {
				direction: rtl;
			}

			.result-header {
				padding: 8px 16px 8px 16px;
			}

			.proportion-content-container {
				.content {
					direction: ltr;
				}
			}
		}
	}

	.divider {
		width: 447px;
		height: 1px;
		background: $color-white;
		margin: 4px 0px;
	}

	mat-accordion {
		box-shadow: 0px 0px 2px 0px rgba(11, 22, 62, 0.08), 0px 0px 10px 0px rgba(11, 22, 62, 0.04);
		border-radius: 10px !important;
	}

	.top-header-container {
		background: $color-white;
		box-shadow: 0px 0px 10px 0px rgba(11, 22, 62, 0.04), 0px 0px 2px 0px rgba(11, 22, 62, 0.08);
		border-radius: 8px;

		.header-container {
			padding: 16px;
			z-index: 2;
			.header {
				display: flex;
				flex-direction: row;
				gap: 8px;

				cr-button {
					::ng-deep {
						mat-icon,
						.cls-button-text {
							color: $color-dark-blue !important;
						}
					}

					&[dir='rtl'] {
						::ng-deep {
							mat-icon {
								transform: scale(-1, -1);
							}
						}
					}
				}
				.title {
					color: $color-black;
					font-family: 'Almarai' !important;
					font-size: 18px;
					font-weight: 700;
					line-height: 24px; /* 133.333% */
					text-transform: capitalize;
				}
				.beta-container {
					border-radius: 16px;
					background: rgba(43, 149, 255, 0.2);
					height: 22px;
					padding: 3px 8px;
					span {
						color: #2b95ff;
						font-family: 'haboro-soft';
						font-size: 12px;
						font-weight: 500;
					}
				}
				a {
					text-decoration: none;
					.info-icon {
						width: 24px;
						height: 24px;
						font-size: 24px;
						color: #0517a6;
						cursor: pointer;
					}
				}

				::ng-deep {
					.mat-button-wrapper {
						line-height: normal !important;
					}
				}
			}
			.header-description {
				color: $color-black;
				font-family: 'haboro-soft' !important;
				font-size: 14px;
				font-weight: 500;
			}
			.grade-bar-top-container {
				.title {
					color: $color-black;
					font-family: 'haboro-soft' !important;
					font-size: 12px;
					font-weight: 800;
				}
				.grade-bar-container {
					display: flex;
					flex-direction: row;
					gap: 16px;
					align-items: center;
					direction: ltr;
					.grade-bar {
						display: flex;
						flex-direction: column;
						width: 100%;
						background: #dde6e9;
						border-radius: 10px;
						box-sizing: border-box;
						border: none !important;
						height: 8px;
						cursor: pointer;
						.min-result {
							height: 100%;
							background-color: $color-explain-ai-low;
							border-radius: 10px 0 0 10px;
						}
						.mid-result {
							height: 100%;
							background-color: $color-explain-ai-medium;
						}
						.max-result {
							height: 100%;
							background-color: $color-explain-ai-high;
							border-radius: 0 10px 10px 0;
						}
					}
					.min-proportion,
					.max-proportion {
						white-space: nowrap;
						color: $color-black;
						font-family: 'haboro-soft';
						font-size: 12px;
						font-weight: 700;
					}
				}
			}
		}
		.header-container-mobile {
			box-shadow: none;
			margin: 0;
		}

		.total-phrases {
			color: $color-black;
			font-family: Almarai !important;
			font-size: 14px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
			margin-inline-start: auto;
		}
		.result-header {
			border-radius: 10px 10px 0px 0px;
			background: $color-container-background;
			padding: 8px 16px 8px 16px;
			.ratio-contanier {
				width: 70px;
				mat-icon {
					width: 16px;
					height: 16px;
					font-size: 16px;
					color: rgba(11, 22, 62, 0.6);
					cursor: pointer;
				}
				span {
					color: var(--Black-600, rgba(11, 22, 62, 0.6));
					font-family: 'haboro-soft' !important;
					font-size: 12px;
					font-weight: 800;
				}
			}
			.phrase {
				color: var(--Black-600, rgba(11, 22, 62, 0.6));
				font-family: 'haboro-soft' !important;
				font-size: 12px;
				font-weight: 800;
			}
		}
	}
	.container-explain-results {
		overflow: hidden;
		.desktop-scroll {
			overflow: auto;
			gap: 8px;
		}
		.explain-results {
			::ng-deep .mat-expansion-panel {
				box-shadow: none;
				border-bottom: 1px solid $color-container-background;
				background-color: $color-white;
				border-radius: 10px !important;
				::ng-deep .mat-expansion-panel-header {
					padding: 16px;
					height: auto;
					box-shadow: none;
					.mat-expansion-panel-header-title {
						width: 100%;
						margin: 0;
						.panel-header-container {
							width: 100%;
						}
						.proportion-content-container {
							overflow: hidden;
							max-width: 90%;
							.proportion {
								min-width: 70px !important;
								padding: 4px 8px;
								border-radius: 6px;
								background-color: #9479ff;
								span {
									color: $color-black;
									text-align: end;
									font-family: 'haboro-soft';
									font-size: 14px;
									font-weight: 800;
									white-space: nowrap;
								}
								mat-icon {
									width: 18px;
									height: 18px;
									font-size: 18px;
								}
							}
							.low-proportion {
								background-color: $color-explain-ai-low;
							}
							.medium-proportion {
								background-color: $color-explain-ai-medium;
							}
							.high-proportion {
								background-color: $color-explain-ai-high;
							}
							.content {
								color: $color-black;
								font-family: 'Open Sans' !important;
								font-size: 14px;
								font-weight: 400;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								position: relative;
							}

							.show-all-text {
								animation: showContent 0.5s ease forwards;
							}

							@keyframes showContent {
								0% {
									overflow: hidden;
									white-space: nowrap;
									background-color: transparent;
								}
								100% {
									overflow: visible;
									white-space: normal;
									border-radius: 1px;
								}
							}
						}

						.keyboard-arrow-icon {
							font-size: 18px;
							width: 18px;
							height: 18px;
							color: #2b95ff;
						}
					}
					.mat-expansion-indicator:after {
						color: $color-primary;
					}
					&:hover {
						background-color: $color-white;
					}
				}
				::ng-deep .mat-expansion-panel-body {
					padding: 0 16px 16px;
				}
			}
			.result-top-container {
				.result-container {
					border-radius: 8px;
					box-shadow: 0px 0px 2px 0px rgba(11, 22, 62, 0.08) inset, 0px 0px 10px 0px rgba(11, 22, 62, 0.04) inset;
					.result-header {
						border-radius: 6px 6px 0px 0px;
						background-color: $color-container-background;
						padding: 8px 10px;
						.title {
							color: $color-black;
							font-family: 'haboro-soft';
							font-size: 12px;
							font-weight: 800;
						}
						.info-icon {
							width: 18px;
							height: 18px;
							font-size: 18px;
							color: rgba(11, 22, 62, 0.6);
							cursor: pointer;
						}
					}
					.ai-count-container,
					.human-count-container {
						background: $color-container-background;
						padding: 8px 10px;
						.title {
							color: $color-black;
							font-family: 'haboro-soft';
							font-size: 12px;
							font-weight: 800;
						}
						.count-result {
							color: $color-black;
							font-family: 'haboro-soft';
							font-size: 12px;
							font-weight: 500;
						}
					}
					.human-count-container {
						border-radius: 0px 0px 6px 6px;
					}
				}
				.result-number-explain {
					color: $color-black;
					font-family: 'haboro-soft' !important;
					font-size: 12px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
				}
				.ai-count-container,
				.human-count-container {
					background: $color-container-background;
					padding: 8px 10px;
					.title {
						white-space: nowrap;
						color: $color-black;
						font-family: 'haboro-soft' !important;
						font-size: 12px;
						font-weight: 800;
						line-height: normal;
					}
					.count-result {
						color: $color-black;
						font-family: 'haboro-soft' !important;
						font-size: 12px;
						font-weight: 500;
						line-height: normal;
					}
				}
				.human-count-container {
					border-radius: 0px 0px 6px 6px;
				}
			}
		}
	}
	.navigate-mobie-button-contaienr {
		padding-bottom: 16px;
		height: 42px;

		.mat-chip-navigate {
			font-size: 12px;
			font-weight: 700;
			color: $color-black;
			border: 1px solid $grayed-out-disabled;
			background: rgba(43, 149, 255, 0.2);
			padding: 2px 8px !important;
			height: fit-content !important;
			min-height: auto !important;
			line-height: normal !important;
			border-radius: 16px !important;
		}
	}
	.explain-results-mobile-container {
		padding: 0 16px 16px;
		min-height: 65px;
		align-items: center;
		.mobile-scroll {
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			min-height: 58px;
			height: 100%;
			scrollbar-width: none;
			width: 330px;
			.explain-results {
				width: 330px;
				scroll-snap-align: start;
				mat-accordion {
					width: 330px;
					box-shadow: 0px 0px 2px 0px rgba(11, 22, 62, 0.08), 0px 0px 10px 0px rgba(11, 22, 62, 0.04);
				}
				::ng-deep .mat-expansion-panel {
					border-radius: 10px !important;
					background: $color-container-background;
					box-shadow: 0px 0px 2px 0px rgba(11, 22, 62, 0.08) inset, 0px 0px 10px 0px rgba(11, 22, 62, 0.04) inset;
					::ng-deep .mat-expansion-panel-header {
						border-radius: 10px !important;
						background: $color-container-background;
					}
					::ng-deep .mat-expansion-panel-body {
						padding: 0 16px 16px;
					}
				}
				.result-container {
					.result-header,
					.ai-count-container,
					.human-count-container {
						background: $color-white;
					}
				}
			}
			@media screen and (max-width: 360px) {
				width: 300px;
				.explain-results {
					width: 300px;
					mat-accordion {
						width: 300px;
					}
				}
			}
		}
		.empty-and-locked-contaienr {
			padding: 0;
		}
	}

	.explain-results-mobile-container-padding {
		padding-bottom: 0 !important;
	}
	.loading-container {
		width: 100%;
		.skeleton {
			width: fit-content;
			display: flex;
			height: fit-content !important;
			::ng-deep .loader {
				height: 18px !important;
				margin-bottom: 0px !important;
				border-radius: 10px !important;
				opacity: 0.2;
				background-color: $color-medium-dark;
			}
		}
		.skeleton-small-height {
			::ng-deep .loader {
				height: 15px !important;
			}
		}
		.loading-header-top-container {
			width: 100%;
			padding: 16px;
			border-radius: 10px 10px 0px 0px;
			background: $color-white;
			box-shadow: 0px 0px 2px 0px rgba(11, 22, 62, 0.12), 0px 0px 20px 0px rgba(11, 22, 62, 0.12);

			.loading-header-container {
				width: 100%;
				.title-loading {
					width: 30%;
				}
				.first-description-loading {
					width: 60%;
				}
				.second-description-loading {
					width: 80%;
				}
			}
			.loading-grade-bar-container {
				width: 100%;
				.description-loading {
					width: 80%;
				}
				.grade-bar-loading {
					width: 80%;
				}
			}
		}
		.loading-result-top-container {
			width: 100%;
			.loading-result-container {
				width: 100%;
				padding: 16px;
				background: $color-white;
				border-radius: 10px;
				.proportion-loading {
					width: 15%;
					::ng-deep .loader {
						height: 26px !important;
					}
				}
				.result-loading {
					width: 50%;
				}
			}
			.loading-contant-result-container {
				width: 100%;
				padding: 0px 16px 16px 16px;
				background: $color-white;
				border-radius: 0px 0px 10px 10px;

				.description-loading {
					padding: 8px 10px;
					border-radius: 6px 6px 0px 0px;
					background: $color-container-background;
					.loading {
						width: 40%;
					}
				}
				.ai-count-loading-container {
					width: 100%;
					padding: 8px 10px;
					background: $color-container-background;
					.ai-count-loading {
						width: 20%;
					}
					.result-loading {
						width: 50%;
					}
				}
				.human-count-loading-container {
					width: 100%;
					padding: 8px 10px;
					border-radius: 0px 0px 6px 6px;
					background: $color-container-background;
					.human-count-loading {
						width: 30%;
					}
					.result-loading {
						width: 40%;
					}
				}
			}
		}
		.mobile-loading-container {
			width: 300px;
			padding: 16px;
			background: $color-white;
			border-radius: 10px;
			.mobile-header-loading-container {
				.header-loading {
					width: 30%;
				}
			}
			.result-loading-container {
				width: 100%;
				.proportion-loading {
					width: 15%;
					::ng-deep .loader {
						height: 26px !important;
					}
				}
				.result-loading {
					width: 50%;
				}
			}
		}
	}
}

.locked-view,
.empty-view {
	.container-explain-results {
		height: 100%;
		.empty-and-locked-contaienr {
			height: 100%;
		}
	}
}

.locked-view {
	.empty-and-locked-contaienr {
		span {
			color: $color-black;
			font-family: 'Almarai' !important;
			font-size: 20px;
			font-weight: 800;
			text-transform: capitalize;
		}
		mat-icon {
			color: #2b95ff;
			font-size: 18px;
			width: 18px;
			height: 18px;
		}
	}
}

.empty-view {
	.header-container {
		padding: 16px 0 0;
		box-shadow: none;
	}
	.empty-and-locked-contaienr {
		padding: 0px 16px;
		background-color: $color-white;
		border-radius: 10px;
		.empty-contaienr {
			padding: 16px;
			border-radius: 10px;
			background: $color-container-background;
			box-shadow: 0px 0px 2px 0px rgba(11, 22, 62, 0.12);
			.title {
				color: $color-black;
				font-family: 'Almarai' !important;
				font-size: 18px;
				font-weight: 800;
				line-height: 24px; /* 133.333% */
				text-align: center;
			}
			.description {
				color: $color-black;
				font-family: 'haboro-soft' !important;
				font-size: 14px;
				font-weight: 500;
				text-align: center;
			}
		}
	}
}

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

.dots-container {
	display: flex;
	flex-direction: row;
	gap: 8px;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.desktop-view-ai-logics-container {
	display: flex;
	padding: 8px;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	align-self: stretch;
	border-radius: 12px;
	margin-bottom: 8px;
	border: 1px solid #bca6ff !important;
	background: linear-gradient(0deg, rgba(161, 136, 255, 0.2) 0%, rgba(161, 136, 255, 0.2) 100%), $color-white;

	&.with-scroll {
		overflow-y: auto;
	}

	.desktop-view-ai-logics-title-container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		align-self: stretch;

		.title-text-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			align-self: stretch;

			.title-text {
				color: $color-black;
				font-size: 20px;
				font-style: normal;
				font-weight: 800;
				line-height: normal;
			}

			mat-icon {
				height: 18px;
				font-size: 18px;
				width: 18px;
				color: rgba(11, 22, 62, 0.6);
				cursor: pointer;
			}
		}

		.title-text-description {
			color: $color-black;
			font-size: 14px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
			letter-spacing: -0.42px;
		}
	}
}

.mobile-view-ai-logics-container {
	display: flex;
	padding-right: 14px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	.title-container {
		display: flex;
		align-items: center;
		gap: 8px;

		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;
	}
}

.mobile-view-scroll-container {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	.mobile-view-default-entries-container {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		align-self: stretch;
		overflow-x: auto;
		width: fit-content;
		::ng-deep {
			cr-ai-phrases-entry,
			cr-ai-source-match-entry,
			cr-ai-source-match-upgrade {
				width: 320px;
				align-self: flex-start !important;
				box-sizing: border-box;
			}
		}
	}
}

.phrases-title-loading-container {
	border-radius: 8px 8px 0px 0px;
	background: linear-gradient(184deg, rgba(248, 234, 255, 0.12) 4.29%, rgba(215, 197, 255, 0.12) 109.21%),
		var(--Colors-Main-White, #fbffff);
	.part {
		display: flex;
		padding: 4px 8px;
		align-items: center;
		gap: 4px;
	}

	.bar {
		width: fit-content;
		display: flex;
		height: fit-content !important;
		::ng-deep .loader {
			height: 8px !important;
			margin-bottom: 0px !important;
			border-radius: 10px !important;
			opacity: 0.2;
			background-color: $color-medium-dark;
		}
	}
}

.skeleton.circle {
	::ng-deep .loader {
		width: 18px !important;
		height: 18px !important;
	}
}

::ng-deep .mat-tooltip.tooltip-contanier {
	font-size: 16px !important;
	font-weight: 500 !important;
	color: $color-white !important;
	background-color: $color-black !important;
	border-radius: 10px !important;
	padding: 14px !important;
	font-family: 'haboro-soft', sans-serif !important;
	white-space: normal !important;
}
::ng-deep ::-webkit-scrollbar-track {
	margin-top: 10px;
	margin-bottom: 10px;
}

.lang-not-supported-container {
	display: flex;
	padding: 8px;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	align-self: stretch;
	border-radius: 10px;
	background: rgba(208, 67, 64, 0.1);
	box-shadow: 0px 0px 2px 0px rgba(11, 22, 62, 0.12);

	.title {
		color: $color-black;
		font-size: 14px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
	}
	.description {
		color: $color-black;
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
	}

	.language-icon-container {
		display: flex;
		padding: 8px;
		justify-content: center;
		align-items: center;
		gap: 8px;
		border-radius: 18px;
		background: rgba(208, 67, 64, 0.2);

		mat-icon {
			color: $color-error;
			height: 18px;
			width: 18px;
			font-size: 18px;
			gap: 10px;
		}
	}
}
