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

:host {
	position: relative;
}

[dir='rtl'] {
	::ng-deep {
		.match-type-stats-bar-container {
			flex-direction: row-reverse !important;
		}
		.tooltip-indicator {
			inset-inline-start: initial !important;
			inset-inline-end: 50% !important;
		}
	}
}

.tooltip {
	min-width: 220px;
	position: fixed;
	flex-direction: column;
	justify-content: space-between;
	background-color: $color-white;
	box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25) !important;
	border-radius: 4px;
	padding: 8px;
	font-size: 12px;
	transform: translateX(-50%);
	z-index: 1000000;
	display: flex;
	padding: 8px;
	align-items: flex-start;
	gap: 8px;
	align-self: stretch;

	&::before {
		content: '';
		border: 5px solid $color-white;
		width: 0;
		height: 0;
		position: absolute;
	}

	&--below {
		transform: translateX(-50%);
		margin-top: 7px;

		&::before {
			border-inline-start-color: transparent;
			border-inline-end-color: transparent;
			border-top: none;
			inset-inline-start: calc(50% - 5px);
			top: -5px;
		}

		&::after {
			border-inline-start-color: transparent;
			border-inline-end-color: transparent;
			border-top-color: rgba(0, 0, 0, 0.25);
			inset-inline-start: calc(50% - 6px);
			top: -7px;
		}

		.tooltip-indicator {
			position: absolute;
			inset-inline-start: 50%;
			top: -9px;
			transform: rotateX(180deg);
			z-index: 100000000;
		}
	}

	&--above {
		transform: translate(-50%, -100%);
		margin-bottom: 7px;

		&::before {
			border-inline-start-color: transparent;
			border-inline-end-color: transparent;
			border-bottom: none;
			inset-inline-start: calc(50% - 5px);
			bottom: -5px;
		}

		&::after {
			border-inline-start-color: transparent;
			border-inline-end-color: transparent;
			border-bottom-color: rgba(0, 0, 0, 0.25);
			inset-inline-start: calc(50% - 6px);
			bottom: -7px;
		}

		.tooltip-indicator {
			position: absolute;
			inset-inline-start: 50%;
			bottom: -19px;
			transform: translate(-50%, -50%);
			z-index: 100000000;
		}
	}

	&--left {
		transform: translate(calc(-100% - 7px), -50%);

		&::before {
			border-top-color: transparent;
			border-bottom-color: transparent;
			border-inline-end: none;
			inset-inline-end: -5px;
			top: calc(50% - 5px);
		}

		&::after {
			border-top-color: transparent;
			border-bottom-color: transparent;
			border-inline-end-color: rgba(0, 0, 0, 0.25);
			inset-inline-end: -6px;
			top: calc(50% - 6px);
		}
	}

	&--right {
		transform: translateY(-50%);
		margin-inline-start: 7px;

		&::before {
			border-top-color: transparent;
			border-bottom-color: transparent;
			border-inline-start: none;
			inset-inline-start: -5px;
			top: calc(50% - 5px);
		}

		&::after {
			border-top-color: transparent;
			border-bottom-color: transparent;
			border-inline-start-color: rgba(0, 0, 0, 0.25);
			inset-inline-start: -6px;
			top: calc(50% - 6px);
		}
	}
}

.title-container {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 15px;
	.title,
	.percentage {
		color: $color-black;
		font-size: 12px;
		font-weight: 500;
		text-transform: uppercase;
		font-family: haboro-soft, Almarai, sans-serif !important;
	}
	.dot {
		display: block;
		border-radius: 50%;
		width: 10px;
		height: 10px;
		border: 0.5px solid $grayed-out-disabled;

		&.identical {
			background-color: $color-plagiarism-identical;
		}

		&.minor-changes {
			background-color: $color-plagiarism-minor-changes;
		}

		&.paraphrased {
			background-color: $color-plagiarism-paraphrased;
		}

		&.omitted-words {
			background-color: $color-plagiarism-omitted-words;
			color: $color-black !important;
		}

		&.ai {
			background-color: $color-ai-detected-text;
		}

		&.human {
			background-color: $color-container-background;
		}
	}
}

.match-type-container {
	color: $color-black;
	font-family: haboro-soft, Almarai, sans-serif !important;
	font-size: 10px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	text-transform: uppercase;
}

.match-type-container,
.identical-stats,
.minor-changes-stats,
.paraphrased-stats,
.omitted-words-stats,
.ai-stats,
.human-stats {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: $color-white;
	z-index: 1000000000000000;
}

.percentage {
	color: $color-black;
	text-align: end;
	font-size: 12px;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 15px;

	.num-of-words-stat {
		text-align: start;
	}
}

.tooltip-indicator {
	filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25));
}

.disabled-property {
	text-decoration: line-through;
}

.num-of-words-stat,
.percentage-stat {
	font-family: Almarai, haboro-soft, sans-serif !important;
	font-weight: 800 !important;
}

.first-column-container,
.second-column-container,
.third-column-container {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.right-section-container {
	display: flex;
	flex-direction: row;
	gap: 12px;
}

.tooltip-titles-container {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	align-self: stretch;
	.match-type-text {
		color: $grayed-out-disabled;
		font-size: 10px;
		font-style: normal;
		font-weight: 900;
		line-height: normal;
		text-transform: uppercase;
		font-family: haboro-soft, Almarai, sans-serif !important;
	}

	.text-coverage-container {
		display: flex;
		flex-direction: column;
		.text-coverage-text {
			align-self: stretch;
			color: $grayed-out-disabled;
			text-align: center;
			font-size: 10px;
			font-style: normal;
			font-weight: 300;
			line-height: normal;
			letter-spacing: 0.9px;
			text-transform: uppercase;
			font-family: haboro-soft, Almarai, sans-serif !important;
		}
		.column-titles-container {
			display: flex;
			flex-direction: row;
			font-family: haboro-soft, Almarai, sans-serif !important;
		}
	}
}

.tooltip-stats-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	align-self: stretch;
	.match-type-stats-container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		align-self: stretch;
		.match-type-stats-numbers-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			align-self: stretch;
			.match-type-title-text {
				color: $color-medium-dark;
				text-align: center;
				font-size: 14px;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
				font-family: haboro-soft, Almarai, sans-serif !important;
			}
			.match-type-numbers-container {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				gap: 4px;
				width: 83px;
				.match-type-numbers {
					color: $color-black;
					text-align: end;
					font-family: Almarai, haboro-soft, sans-serif !important;
					font-size: 12px;
					font-style: normal;
					font-weight: 700;
					line-height: normal;
					text-transform: uppercase;
				}
			}
		}
		.match-type-stats-bar-container {
			width: 100%;
			display: flex;
			height: 8px;
			border-radius: 10px;

			.match-type-bar-pct {
				animation: pct-inital-animation 0.6s ease-out forwards;
			}

			&.identical {
				border: 1px solid $color-plagiarism-identical;
				.match-type-bar-pct {
					border-radius: 10px;
					background: $color-plagiarism-identical;
					box-shadow: 0px -4px 2px 0px rgba(0, 0, 0, 0.04) inset;
				}
			}

			&.minor-changes {
				border: 1px solid $color-plagiarism-minor-changes;
				.match-type-bar-pct {
					border-radius: 10px;
					background: $color-plagiarism-minor-changes;
					box-shadow: 0px -4px 2px 0px rgba(0, 0, 0, 0.04) inset;
				}
			}

			&.paraphrased {
				border: 1px solid $color-plagiarism-paraphrased;
				.match-type-bar-pct {
					border-radius: 10px;
					background: $color-plagiarism-paraphrased;
					box-shadow: 0px -4px 2px 0px rgba(0, 0, 0, 0.04) inset;
				}
			}

			&.original {
				border-radius: 10px;
				border: 1px solid rgba(63, 154, 245, 0.2);
				background: rgba(63, 154, 245, 0.08);
				.match-type-bar-pct {
					border-radius: 10px;
					border: 1px solid rgba(63, 154, 245, 0.6);
					background: $color-primary;
				}
			}

			&.ai {
				border-radius: 10px;
				border: 1px solid $color-ai-detected-text;
				.match-type-bar-pct {
					border-radius: 10px;
					background: $color-ai-detected-text;
					box-shadow: 0px -4px 2px 0px rgba(0, 0, 0, 0.04) inset;
				}
			}
		}
	}

	.omitted-words-stats-container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		// gap: 2px;
		.omitted-words-title-text {
			font-family: haboro-soft, Almarai, sans-serif !important;
			color: $color-medium-dark;
			text-align: center;
			font-size: 14px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
		.total-omitted-words {
			font-family: Almarai, haboro-soft, sans-serif !important;
			color: $color-black;
			font-size: 12px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
			text-transform: uppercase;
		}

		.omitted-words-stats-bar-container {
			width: 100%;
			display: flex;
			height: 8px;
			border-radius: 10px;
			border: 1px solid rgba(63, 154, 245, 0.2);
			background: rgba(63, 154, 245, 0.08);
			.omitted-words-bar-pct {
				border-radius: 10px;
				border: 2px dashed $color-primary;
				background: rgba(63, 154, 245, 0.2);
				animation: pct-inital-animation 0.6s ease-out forwards;
			}
		}
	}
}

.line-break {
	stroke-width: 1px;
	stroke: $color-container-background;
	align-self: stretch;
}

@keyframes pct-inital-animation {
	from {
		width: 0%;
	}
}

.inline {
	position: static;
	transform: initial;
	transform-origin: initial;
	box-shadow: none !important;
	margin-bottom: 0px;
	padding: 2px !important;
	min-width: auto;

	svg {
		display: none;
	}
}
