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

:host {
	width: 100%;

	[dir='rtl'] {
		::ng-deep {
			.stacked-bar {
				flex-direction: row-reverse !important;
			}
		}
	}
}
.plagiarism-detection-percentage-top-container {
	width: 100%;
	.plagiarism-detection-percentage-container {
		width: 100%;
		.plagiarism-detection-title {
			width: 100%;
			span {
				font-weight: 500;
				font-size: 14px;
				color: $color-black;
			}
		}
		.plagiarism-detection-percentage-result {
			width: 100%;
			padding: 0px 0px 0px 32px;
		}

		.stacked-bar-top-container {
			width: 100%;
			position: relative;

			.title,
			.title-percentage {
				color: $color-black;
				font-size: 16px;
				font-style: normal;
				font-weight: 600;
				line-height: normal;
				white-space: nowrap;
			}

			.stacked-bar-container {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				&:hover {
					.stacked-bar-tooltip-result {
						visibility: visible;
					}
				}

				.stacked-bar-tooltip-result {
					visibility: hidden;
					top: -80px;

					background-color: $color-white;
					box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25);
					border-radius: 10px;
					padding: 4px 8px;
					position: absolute;
					width: 165px;
				}

				.stacked-bar-tooltip-result::after {
					content: '';
					position: absolute;
					border-style: solid;
					top: 100%;
					inset-inline-start: 45%;
					font-size: larger;
					border-width: 10px;
					border-color: $color-white transparent transparent transparent;
				}
			}

			.stacked-bar {
				width: 100%;
				border-radius: 4px;
			}

			.similar-words-percentage {
				color: $color-black;
				font-size: 14px;
				font-weight: 700;
			}
		}
	}
	.show-plagiarism-detection-button {
		border: 0px;
		padding: 0px;
		background-color: $color-white;
		cursor: pointer;
		width: unset;
		height: unset;
		line-height: unset;

		mat-icon {
			width: 18px;
			height: 18px;
			font-size: 18px;
			color: $color-black;
		}
	}
}

.match-type-top-container {
	width: 100%;
	.match-type-title {
		width: 100%;
		span {
			color: $color-black;
			font-size: 10px;
			font-weight: 500;
		}
		.number-words-match {
			white-space: nowrap;
			width: 50px;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.match-type-cotainer {
		width: 100%;
		.dot {
			width: 10px;
			height: 10px;
			border-radius: 50%;
		}
		.type-name,
		.percentage-match {
			font-weight: 500;
			font-size: 12px;
			color: $color-black;
		}
		.number-words-match {
			font-weight: 500;
			font-size: 12px;
			color: $color-black;
			white-space: nowrap;
			width: 50px;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.match-type-word {
		white-space: nowrap;
		width: 50px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

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

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

.identical {
	background-color: #fd7366;
}
.paraphrased {
	background-color: #fed5a9;
}
.minorChanges {
	background-color: #ffb1b1;
}

.type-value {
	font-weight: 700 !important;
}

.identical,
.paraphrased,
.minorChanges {
	transition: width 2s;
}

.cdk-keyboard-focused {
	outline: 2px solid black !important;
}
