@import '../../../styles/containers.styles.scss';
@import '../../../styles/styles.scss';
@import '../../../styles/website-colors.styles.scss';
@import '../../../styles/cls-mat-components-overrides/cls-progress-bar-overrides.scss';

:host {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: relative;

	[dir='rtl'] {
		::ng-deep {
			.bar,
			.grade-bar,
			.score-container {
				flex-direction: row-reverse !important;
			}

			.mobile-tab-container {
				.charts-container {
					direction: ltr;
				}
			}
		}
	}

	.loading-div {
		display: flex;
		width: 149px;
		height: 19px;
		justify-content: center;
		align-items: center;
		background-color: #ccd4df;
		border-radius: 10px;
	}

	.assessment-tool-container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;

		&.mobile {
			flex-direction: row;
			width: 100%;
			box-sizing: border-box;
			background: $color-white;
			box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.05);
			padding: 4px 6px 2px 6px;
			align-items: flex-end;
			gap: 2px;

			.matched-text-tab,
			.ai-tab,
			.writing-assistant-tab,
			::ng-deep .custom-tab {
				flex-grow: 1 !important;
				box-sizing: border-box !important;
			}
		}

		.matched-text-tab,
		.ai-tab,
		.writing-assistant-tab {
			cursor: pointer;
			box-sizing: border-box;
			&.at-tab-disabled {
				cursor: not-allowed !important;
			}
		}

		.title,
		svg {
			transition: all 0.3s ease-in-out;
		}

		.matched-text-tab {
			display: flex;
			width: 72px;
			height: 96px;
			padding: 8px 4px;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 2px;
			border-radius: 10px;
			border: 1px solid $color-white;
			background: $color-container-background;
			box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.15), -2px -2px 8px 0px rgba(255, 255, 255, 0.5);
			border-top: 1px solid transparent;
			border-inline-end: 1px solid transparent;
			border-bottom: 2px solid transparent;
			border-inline-start: 1px solid transparent;
			transition: 0.4s ease-in-out;
			&.at-tab-enabled {
				&:hover,
				&.tab-selected {
					border-radius: 10px;
					border-top: 1px solid $color-plagiarism-identical;
					border-inline-end: 1px solid $color-plagiarism-identical;
					border-bottom: 2px solid $color-plagiarism-identical;
					border-inline-start: 1px solid $color-plagiarism-identical;
					background: $color-white;
					box-shadow: -4px -4px 4px 0px rgba(236, 119, 116, 0.1) inset, 4px 4px 4px 0px rgba(251, 115, 103, 0.1) inset;
					.title {
						color: $color-plagiarism-identical;
						font-weight: 800;
					}

					.icon-container {
						svg {
							width: 22px;
							height: 23px;
							flex-shrink: 0;
						}
					}
				}
			}

			.icon-container {
				box-sizing: border-box;
				display: flex;
				width: 32px;
				height: 32px;
				padding: 8px 10px;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 8px;
				border-radius: 14px;
				border: 1px solid rgba(255, 133, 118, 0.4);
				background: linear-gradient(139deg, rgba(255, 133, 118, 0.2) 0%, rgba(251, 255, 255, 0) 100.01%);
				svg {
					width: 17px;
					height: 17.773px;
					flex-shrink: 0;
				}
			}

			.score-container {
				display: flex;
				align-items: center;
				gap: 4px;
				svg {
					width: 8px;
					height: 8px;
					fill: $plag-score-top-level;
				}
				.score {
					color: $color-black;
					text-align: center;
					font-family: haboro-soft, sans-serif !important;
					font-size: 12px;
					font-style: normal;
					font-weight: 800;
					line-height: normal;
				}
			}
		}

		.ai-tab {
			display: flex;
			width: 72px;
			height: 96px;
			padding: 8px 4px;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 2px;
			border-radius: 10px;
			border: 1px solid $color-white;
			background: $color-container-background;
			box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.15), -2px -2px 8px 0px rgba(255, 255, 255, 0.5);
			border-top: 1px solid transparent;
			border-inline-end: 1px solid transparent;
			border-bottom: 2px solid transparent;
			border-inline-start: 1px solid transparent;
			transition: 0.4s ease-in-out;

			&.at-tab-enabled {
				&:hover,
				&.tab-selected {
					border-radius: 10px;
					border-top: 1px solid $color-ai-tab;
					border-inline-end: 1px solid $color-ai-tab;
					border-bottom: 2px solid $color-ai-tab;
					border-inline-start: 1px solid $color-ai-tab;
					background: $color-white;
					box-shadow: -4px -4px 4px 0px rgba(236, 119, 116, 0.1) inset, 4px 4px 4px 0px rgba(251, 115, 103, 0.1) inset;
					.title {
						color: $color-ai-tab;
						font-weight: 800;
					}

					.icon-container {
						svg {
							width: 28px;
							height: 20px;
							flex-shrink: 0;
						}
					}
				}
			}

			.icon-container {
				box-sizing: border-box;
				display: flex;
				width: 32px;
				height: 32px;
				padding: 8px 4px;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 10px;
				border-radius: 14px;
				border: 1px solid rgba(101, 18, 210, 0.4);
				background: linear-gradient(125deg, rgba(101, 18, 210, 0.2) 0%, rgba(251, 255, 255, 0) 99.92%);
				svg {
					width: 21px;
					height: 14.538px;
					flex-shrink: 0;
				}
			}

			.score-container {
				display: flex;
				align-items: center;
				gap: 4px;
				svg {
					width: 8px;
					height: 8px;
					fill: $plag-score-mid-level;
				}
				.score {
					color: $color-black;
					text-align: center;
					font-family: haboro-soft, sans-serif !important;
					font-size: 12px;
					font-style: normal;
					font-weight: 800;
					line-height: normal;
				}
			}
		}

		.writing-assistant-tab {
			display: flex;
			width: 72px;
			height: 96px;
			padding: 8px 4px;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 2px;
			border-radius: 10px;
			border: 1px solid $color-white;
			background: $color-container-background;
			box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.15), -2px -2px 8px 0px rgba(255, 255, 255, 0.5);
			border-top: 1px solid transparent;
			border-inline-end: 1px solid transparent;
			border-bottom: 2px solid transparent;
			border-inline-start: 1px solid transparent;
			transition: 0.4s ease-in-out;
			&.at-tab-enabled {
				&:hover,
				&.tab-selected {
					border-radius: 10px;
					border-top: 1px solid $color-grammar-dark;
					border-inline-end: 1px solid $color-grammar-dark;
					border-bottom: 2px solid $color-grammar-dark;
					border-inline-start: 1px solid $color-grammar-dark;
					background: $color-white;
					box-shadow: -4px -4px 4px 0px rgba(255, 165, 3, 0.14) inset, 4px 4px 4px 0px rgba(255, 165, 3, 0.14) inset;
					.title {
						color: $color-grammar-dark;
						font-weight: 800;
					}

					.icon-container {
						svg {
							width: 24px;
							height: 15px;
							flex-shrink: 0;
						}
					}
				}
			}

			.icon-container {
				box-sizing: border-box;
				display: flex;
				width: 32px;
				height: 32px;
				padding: 8px 4px;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 10px;
				border-radius: 14px;
				border: 1px solid rgba(255, 165, 3, 0.4);
				background: linear-gradient(121deg, rgba(255, 165, 3, 0.2) 0%, rgba(251, 255, 255, 0) 100.14%);
				svg {
					width: 19px;
					height: 11.875px;
					flex-shrink: 0;
				}
			}

			.score-container {
				display: flex;
				align-items: center;
				gap: 4px;
				svg {
					width: 8px;
					height: 8px;
					fill: $plag-score-mid-level;
				}
				.score {
					color: $color-black;
					text-align: center;
					font-family: haboro-soft, sans-serif !important;
					font-size: 12px;
					font-style: normal;
					font-weight: 800;
					line-height: normal;
				}
			}
		}

		.tab-title-container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 4px;
			align-self: stretch;
			.title {
				color: $color-black;
				text-align: center;
				font-size: 12px;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
			}
		}

		::ng-deep {
			.custom-tab {
				flex-grow: initial !important;
				display: flex;
				width: 72px;
				height: 96px;
				padding: 8px 4px;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 2px;
				box-sizing: border-box;
				border-radius: 10px;
				border-top: 1px solid transparent;
				border-inline-end: 1px solid transparent;
				border-bottom: 2px solid transparent;
				border-inline-start: 1px solid transparent;
				background: $color-container-background;
				box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.15), -2px -2px 8px 0px rgba(255, 255, 255, 0.5);
				transition: 0.4s ease-in-out;

				svg {
					width: 19px !important;
					height: 19px !important;
					flex-shrink: 0 !important;
				}
				.title,
				svg {
					transition: all 0.3s ease-in-out;
				}

				&:hover,
				&.tab-selected {
					border-radius: 10px;
					border-top: 1px solid $color-primary;
					border-inline-end: 1px solid $color-primary;
					border-bottom: 2px solid $color-primary;
					border-inline-start: 1px solid $color-primary;
					background: $color-white;
					box-shadow: -4px -4px 4px 0px rgba(63, 154, 245, 0.1) inset, 4px 4px 4px 0px rgba(63, 154, 245, 0.22) inset;

					::ng-deep cr-custom-tab-item-title {
						color: $color-primary !important;
					}
					svg {
						width: 24.049px !important;
						height: 24.049px !important;
						flex-shrink: 0;
					}

					.title {
						color: $color-primary !important;
						text-align: center;
						font-size: 12px;
						font-style: normal;
						font-weight: 800;
						line-height: 109%;
					}

					&::after {
						display: none !important;
					}
				}
			}

			cr-custom-tab-item-title :first-child {
				width: 32px !important;
				box-sizing: border-box;
			}

			cr-custom-tab-item-title {
				display: flex;
				width: 72px;
				height: 96px;
				padding: 0px !important;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 2px;
				flex-grow: initial !important;
			}
		}
	}

	.tab-ai,
	.tab-plagiarism,
	.tab-grammar,
	::ng-deep .custom-tab,
	.loading-tab {
		padding: 16px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 4px;
		border-radius: 10px 10px 0px 0px;
		border: 1px solid $color-white;
		background: $color-container-background;
		cursor: pointer;

		padding: 10px;
		position: relative;
		transition: all 0.3s ease-in-out;
		transition: background 0.5s ease-in-out;

		/* Underline for selected tab */
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			inset-inline-start: 0;
			width: 0;
			height: 2px;
			background-color: $color-primary;
			transition: width 0.3s ease-in-out;
		}

		&.mobile {
			padding: 4px;
		}
	}

	::ng-deep .tab-selected,
	.tab-selected {
		background: $color-white;
	}
	::ng-deep .tab-selected::after,
	.tab-selected::after {
		width: 100%;
	}

	.grade-bar {
		display: flex;
		flex-direction: column;
		width: 100%;
		background-color: $color-white;
		border: 1px solid $color-effect-dialog-background;
		border-radius: 10px;
		box-sizing: border-box;
		height: 8px;
	}

	.bar {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		* {
			height: 100%;
		}
	}

	.identical,
	.paraphrased,
	.minor-changes,
	.ai-content {
		transition: width 0.7s;
	}

	.identical {
		background-color: $color-plagiarism-identical;
		border: 1px solid $color-plagiarism-identical;
		border-radius: 4px 0px 0px 4px;
	}

	.paraphrased {
		background-color: $color-plagiarism-paraphrased;
		border: 1px solid $color-plagiarism-paraphrased;
	}

	.minor-changes {
		background-color: $color-plagiarism-minor-changes;
		border: 1px solid $color-plagiarism-minor-changes;
	}

	.ai-content {
		background-color: $color-ai-detected-text;
		border: 1px solid $color-ai-detected-text;
		border-radius: 10px;
	}

	.grammar-check {
		background-color: $color-grammar-dark;
		border: 1px solid $color-grammar-dark;
		border-radius: 10px;
	}

	.first-percentage {
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
	}

	.last-percentage {
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.bar-title-container {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: space-between;
		.bar-title,
		.bar-score {
			color: $color-black;
			font-size: 18px;
			font-style: normal;
			font-weight: 700;
		}
	}

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

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

	.skeleton.real-time-view {
		::ng-deep .loader {
			height: 14px !important;
		}
	}

	.loading-tab {
		flex-grow: 1;
		gap: 4px;

		&.first {
			background-color: $color-white;
		}

		.bar {
			height: 10px !important;

			::ng-deep .loader {
				height: 10px !important;
			}
		}
	}

	.tab-disabled {
		opacity: 0.5 !important;
		cursor: not-allowed !important;
	}

	.tab-loading {
		pointer-events: none !important;
	}

	.identical.real-time-view {
		background-color: $color-primary;
		border: 1px solid $color-primary;
		border-radius: 4px 0px 0px 4px;
	}

	.paraphrased.real-time-view {
		background-color: #83bff9;
		border: 1px solid #83bff9;
	}

	.minor-changes.real-time-view {
		background-color: #b0d7fb;
		border: 1px solid #b0d7fb;
	}

	.ai-content.real-time-view {
		background-color: $color-primary;
		border: 1px solid $color-primary;
		border-radius: 10px;
	}

	.bar-score.real-time-view {
		display: flex;
		align-items: center;
		font-size: 12px !important;
		font-style: normal !important;
		font-weight: 700 !important;
		line-height: normal !important;
		font-family: haboro-soft, sans-serif !important;
	}
}

.custom-company-logo-cotainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 0px 12px;
	height: 100%;
	background-color: $color-white;
	.custom-company-logo {
		width: 40px;
	}
}

.tab-ai.with-company-logo,
.tab-grammar.with-company-logo,
.tab-plagiarism.with-company-logo {
	border-top-left-radius: 0px !important;
}

.mobile-tab-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 4px;
	.mobile-tab-title {
		color: $color-black;
		font-size: 18px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		text-transform: capitalize;
	}
}

.mobile-tab-score-container {
	width: 50px;
	height: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.mobile-tab-score {
	color: $color-black;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
}

.charts-container {
	position: relative;
	width: 50px;
	height: 50px;
	ngx-charts-pie-chart,
	.na-border-pic,
	.na-border-text,
	.mobile-tab-score {
		position: absolute;
		top: 50%;
		inset-inline-start: 50%;
		transform: translate(-50%, -50%);
	}
}
.na-border-text {
	color: $color-grayed-out;
	text-align: center;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
}
