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

:host {
	height: 100%;
	box-sizing: border-box;

	flex-grow: 1;
	display: flex;
	flex-direction: column;
	padding: 8px 8px 8px 8px;
	background-color: $color-white;
	border-radius: 0px 0px 10px 10px;

	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;

	cr-author-alert-card {
		margin-bottom: 8px;
	}

	::-moz-selection {
		background: #b4d7fe;
		border-radius: 2px !important;
	}

	::selection {
		background: #b4d7fe;
		border-radius: 2px !important;
	}

	::ng-deep {
		.copyleaks-highlight {
			position: relative;
			background-color: #ffdf54 !important;
			cursor: pointer;
			transition: 0.2s ease-in-out;
			border-radius: 2px !important;

			&:hover,
			&.hover {
				background-color: $color-match-selected !important;
			}

			&.selected {
				background-color: $color-match-selected !important;
			}
		}
	}

	.submitted-doc-name-container {
		display: flex;
		align-items: center;
		gap: 4px;
		mat-icon {
			width: 18px;
			height: 18px;
			font-size: 18px;
			color: $grayed-out-disabled;
		}
		span {
			color: $color-black;
			text-align: center;
			font-size: 14px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
			max-width: 200px;
			width: 100%;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
	}

	.title-and-actions-container {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		flex-wrap: wrap;
		gap: 8px;
		padding-bottom: 8px;
		border-bottom: 1px solid $color-container-background;

		&[dir='rtl'] {
			flex-direction: row-reverse !important;
			::ng-deep {
				.title-container {
					flex-direction: row-reverse !important;
				}
				.submitted-doc-name-container {
					flex-direction: row-reverse;
					span {
						direction: ltr;
						text-align: left;
					}
				}
			}
		}

		.title-container {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 8px;
			font-size: 14px;
			font-style: normal;
			color: $color-black;
			.title {
				font-weight: 700;
			}
			.number-of-words {
				font-weight: 500;
			}
		}

		.actions-container {
			display: flex;
			flex-direction: row;
			gap: 16px;
			justify-content: center;
			align-items: center;
			$icon-size: 16px;

			mat-icon {
				color: $color-dialog-background;
				font-size: $icon-size;
				width: $icon-size;
				height: $icon-size;
				cursor: pointer;
				line-height: normal;
				transition: 0.4s;
			}

			mat-icon:hover {
				color: $color-primary;
			}

			.actions-pair-container {
				display: flex;
				align-items: flex-start;
				gap: 8px;
			}
		}
	}

	.content-container {
		flex-grow: 80;
		height: 80%;
		overflow-y: auto;
		display: flex;
		padding-top: 4px;
		outline: none !important;
		border: 0 !important;
		position: relative;

		&:focus-visible {
			outline: 2px solid black !important;
			box-shadow: inset 0 0 0 2px black;
		}

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

		iframe {
			width: 100%;
			border: none;
		}
	}

	.paginator-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 8px 4px;
		padding-bottom: 0px;
		&[dir='rtl'] {
			::ng-deep {
				.paginator-container,
				.buttons-container {
					flex-direction: row-reverse !important;
				}
			}
		}
		cr-paginator {
			margin-inline-start: auto;
		}
	}

	::ng-deep cr-custom-tab-item-content {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.content-container:focus {
		outline: none !important;
		border: 0 !important;
	}

	.text-container.with-shift-selected {
		user-select: none;
	}
	.text-container {
		width: 100%;
		outline: none !important;
		border: 0 !important;
		white-space: pre-line;
		word-break: break-word;
		padding: 4px;
		line-height: normal;
		position: relative;
		i {
			opacity: 0.7;
		}

		span[class*='cr-m-'] {
			cursor: pointer;
			border-radius: 2px !important;

			&.cr-m-0 {
				background-color: $color-plagiarism-identical;
				transition: 0.2s;

				&:hover {
					background-color: $color-match-selected;
				}
			}

			&.cr-m-1 {
				background-color: $color-plagiarism-minor-changes;
				transition: 0.2s;

				&:hover {
					background-color: $color-match-selected;
				}
			}

			&.cr-m-2 {
				background-color: $color-plagiarism-paraphrased;
				transition: 0.2s;

				&:hover {
					background-color: $color-match-selected;
				}
			}

			&.cr-m-3 {
				background-color: $color-grammar-dark;
				transition: 0.2s;

				&:hover {
					background-color: $color-match-selected;
				}
			}

			&.cr-m-4 {
				background-color: $color-light-ai-detected-text;
				transition: 0.2s;
				cursor: auto !important;
			}

			&.cr-m-6-low {
				background-color: $color-explain-ai-low;
				transition: 0.2s;
				&:hover {
					background-color: $color-match-selected;
				}
			}

			&.cr-m-6-medium {
				background-color: $color-explain-ai-medium;
				transition: 0.2s;
				&:hover {
					background-color: $color-match-selected;
				}
			}

			&.cr-m-6-high {
				background-color: $color-explain-ai-high;
				transition: 0.2s;
				&:hover {
					background-color: $color-match-selected;
				}
			}

			&.cr-m-100 {
				background: transparent;
				color: red;
				text-decoration: underline;
				font-weight: bolder;
				transition: 0.2s;
				&:hover {
					background-color: #3f9af566;
				}
				&.cr-highlight {
					background-color: #3f9af566 !important;

					&:hover {
						background-color: lighten(#3f9af566, 10%) !important;
					}
				}
			}

			&.cr-m-101 {
				background-color: $color-light-ai-detected-text;
				transition: 0.2s;
				cursor: auto !important;
			}

			&.cr-highlight {
				background-color: $color-match-selected;

				&:hover {
					background-color: lighten($color-match-selected, 10%);
				}
			}
		}

		span[exclude-partial-scan] {
			filter: blur(4px);
			cursor: pointer;
			background-color: rgba(7, 17, 52, 0.1) !important;
			display: inline-block;
			width: 100%;
		}

		i[exclude-match] {
			font-style: normal !important;
			opacity: 1 !important;
			color: $color-black !important;
			cursor: pointer;
			border-radius: 2px;
			border-bottom: 2px dashed $color-primary !important;
			background: rgba(63, 154, 245, 0.2) !important;
			position: relative !important;
		}
	}

	.icon-tooltip-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;

		a:focus {
			mat-icon {
				color: $color-primary;
			}
		}

		.actions-container-icon-button {
			width: unset;
			height: unset;
			line-height: unset;
			&:focus {
				mat-icon {
					color: $color-primary;
				}
			}
		}
	}

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

	.circle {
		::ng-deep .loader {
			border-radius: 50% !important;
			width: 16px !important;
			height: 16px !important;
		}
	}

	// Loading view styles
	.title-and-actions-loader-container {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 10px;
		width: 100%;
		margin-bottom: 12px;
		.title-loader-container {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			gap: 4px;
			width: 50%;

			.stats-loader {
				width: 60%;
			}
			.title-loader {
				width: 42%;
			}
		}

		.actions-loader-container {
			width: 50%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			gap: 8px;
			.circle {
				width: 16px !important;
				height: 16px !important;
			}
		}
	}

	.content-loader-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 8px;
		flex-grow: 80;
		height: 80%;
		overflow-y: auto;
		display: flex;

		.paragraph-loader-container,
		.last-paragraph-loader-container {
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 8px;
		}
	}

	.hide-iframe {
		visibility: hidden;
		height: 0 !important;
		width: 0 !important;
	}
	.has-masked-content-title {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		.open-disclaimer-btn {
			mat-icon {
				width: 16px;
				height: 16px;
				font-size: 16px;
				color: $grayed-out-disabled;
				cursor: pointer;
				line-height: 14px;
			}
			&:hover,
			&:focus {
				mat-icon {
					color: $color-primary;
				}
			}
		}
	}
}

.omitted-text-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	background: transparent;
	border: none;
	padding: 0px;
	&:hover,
	&.isOn {
		mat-icon,
		span {
			color: $color-primary !important;
		}
	}
	mat-icon {
		width: 16px;
		height: 16px;
		font-size: 16px;
		color: $grayed-out-disabled;
	}
	span {
		color: $color-black;
		text-align: center;
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
	}
}

#highlight-icon {
	position: absolute;
	display: flex;
	width: 40px;
	height: 40px;
	padding: 8px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	border-radius: 56px;
	background: $color-primary;
	box-shadow: 0px 0px 4px 0px rgba(63, 154, 245, 0.4), 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: 0.4s ease-in-out;
	// dont allow selection
	user-select: none !important;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	-khtml-user-select: none;
	-webkit-touch-callout: none;

	mat-icon {
		width: 24px;
		height: 24px;
		font-size: 24px;
		color: $color-white;
		user-select: none !important;
	}

	&:hover {
		background: $color-white;
		mat-icon {
			color: $color-primary;
		}
	}
}
