@import '../../../../../styles/website-colors.styles.scss';
@import '../../../../../styles/cls-mat-components-overrides/cls-mat-chip-overrides.scss';

:host {
	line-height: normal !important;
}

.result-item-hover-container {
	&:hover {
		cursor: pointer;
		border-color: $color-primary !important;
		.percentage-result-item-container {
			background-color: $color-light-primary;
		}
	}
}

.locked-result-item-container {
	border: 2px solid $color-primary !important;
}

.result-item-hover-container {
	transition: 0.7s;
}

.copy-url-button {
	display: flex !important;
	padding: 0px !important;
	background: transparent !important;
	border: none !important;
	height: 22px !important;
	width: 22px !important;
	cursor: pointer;
}

.result-item-container {
	border: 2px solid;
	border-color: $color-container-background;
	background-color: $color-white;
	border-radius: 10px;

	.item-container {
		background-color: $color-white;
		border-radius: 10px 10px 0px 0px;
		width: 100%;
		.item-header-container {
			width: 100%;
			padding: 2px;
			.item-header {
				padding: 4px 0px 0px 4px;
				width: calc(100% - 28px);
				.item-logo {
					border: 2px solid;
					border-radius: 50%;
					border-color: $color-primary;
					min-width: 34px;
					min-height: 34px;
					mat-icon {
						color: $color-primary;
					}

					&.ai-source-match-icon {
						border: none !important;
						svg {
							height: 34px;
							width: 34px;
						}
					}
				}
				.logo-skeleton {
					::ng-deep .loader {
						background-color: $color-medium-dark;
						opacity: 0.2;
					}
				}
				.title-author-container {
					width: calc(100% - 42px);
					.item-title {
						font-size: 16px;
						font-weight: 500;
						color: $color-black;
						word-break: break-word;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.title-skeleton {
						width: 50%;
					}
					.author-name {
						font-size: 14px;
						font-weight: 500;
						color: $color-medium-dark;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;
						gap: 4px;
						width: 100%;

						span {
							text-wrap: nowrap;
						}

						.author-name-text {
							flex-wrap: nowrap;
							overflow: hidden;
							white-space: nowrap;
							flex-grow: initial;
							text-overflow: ellipsis;
						}

						.chips-container {
							display: flex;
							align-items: center;
							flex-direction: row;
							gap: 4px;
							flex-wrap: nowrap;
							overflow: hidden;
							white-space: nowrap;
							cursor: pointer;
							flex-grow: 1;

							&.suspected-ai-generated-container {
								min-width: auto !important;
								width: auto !important;
								overflow: visible !important;
								.first-tag {
									max-width: none !important;
									pointer-events: all !important;
								}
							}

							&.non-empty-container {
								min-width: 80px;
							}

							.first-tag {
								display: block !important;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								max-width: calc(100% - 30px);
								min &.one-tag {
									max-width: 100%;
								}
							}

							mat-chip {
								pointer-events: none;
							}
						}
					}
					.author-name-skeleton {
						width: 40%;
						::ng-deep .loader {
							height: 15px;
						}
					}
				}
			}
			.icon-button {
				width: unset;
				height: unset;
				line-height: unset;
				min-width: unset;
				padding: 0;
			}
			.item-menu,
			.exclude-result {
				cursor: pointer;
				color: $color-dark-blue;
				transition: 0.4s;
				&:hover {
					color: $color-primary;
				}
				align-self: flex-start;
				padding: 2px;
			}

			.exclude-result {
				line-height: unset;
				font-size: 18px;
				height: 18px;
				width: 18px;
			}
		}
		.item-body {
			padding: 4px 16px;
			width: 100%;
			flex-direction: column;
			display: flex;
			justify-content: flex-start;
			box-sizing: border-box;
			gap: 8px;
			.item-url-container {
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 8px;
				min-height: 25px;

				mat-icon {
					width: 22px;
					height: 22px;
					font-size: 22px;
					color: $color-primary;
				}

				.item-url {
					font-weight: 400;
					font-size: 14px;
					color: $color-primary;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.copied-url-chip {
					border-radius: 32px !important;
					background: #00800133 !important;
					display: inline-flex !important;
					height: 22px !important;
					padding: 0px 8px 0px 4px !important;
					align-items: center !important;
					gap: 4px !important;
					flex-shrink: 0 !important;
					opacity: 0; /* Initially hidden */
					transform: translateY(-10px); /* Initial position for the animation */
					animation: fadeInSlideDown 0.3s ease-out forwards; /* Animation */
					::ng-deep {
						.copy-message {
							overflow: hidden !important;
							color: $color-message-positive !important;
							font-size: 12px !important;
							font-style: normal !important;
							font-weight: 700 !important;
							line-height: normal !important;
						}

						mat-icon {
							width: 18px !important;
							height: 18px !important;
							font-size: 18px !important;
							color: $color-message-positive !important;
						}
					}
				}
			}
			.item-introduction {
				width: 100%;
				font-weight: 500;
				font-size: 14px;
				color: $color-black;
				overflow: hidden;

				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.url-skeleton {
				width: 90%;
			}
			.introduction-skeleton {
				width: 50%;
			}
		}
	}

	.percentage-result-item-container {
		height: 24px;
		padding: 4px 8px;
		background-color: $color-container-background;
		border-radius: 0px 0px 10px 10px;
		width: 100%;

		.percentage-skeleton {
			width: 40%;
			::ng-deep .loader {
				height: 14px;
			}
		}
	}

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

	.locked-result-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		gap: 4px;
		color: $color-black;
		mat-icon {
			font-size: 18px;
			line-height: 18px;
			width: 18px;
			height: 18px;
		}
		span {
			font-size: 18px;
			font-weight: 600;
		}
	}

	&[dir='rtl'] {
		::ng-deep {
			.item-url,
			.item-introduction {
				direction: ltr;
				text-align: left;
			}
		}
	}
}

::ng-deep .result-item-menu-list {
	box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25) !important;
	border-radius: 10px;
	.mat-menu-content {
		align-items: flex-start !important;
		background-color: $color-white !important;
		.mat-menu-item {
			background-color: $color-white !important;
			height: 24px;
			margin: 8px 0px;
			padding: 0px 8px;
			display: flex;
			align-items: center;
			width: 100%;
			box-sizing: border-box;
			&:hover,
			&:focus {
				background-color: $color-container-background !important;
			}
			.mat-menu-item-icon {
				opacity: 0.4;
				color: $color-medium-dark;
				$icon-size: 18px;
				width: $icon-size !important;
				height: $icon-size !important;
				font-size: $icon-size !important;
			}
			.mat-menu-item-text {
				display: flex;
				align-items: center;
				height: 100%;
				font-weight: 500;
				font-size: 14px;
				color: $color-medium-dark;
			}
		}
	}
}

.mobile-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.5em;
	max-height: 3em;
	white-space: normal;
}

.internet-result-icon {
	width: 22px;
	height: 22px;
}

.internet-result-favicon {
	width: 18px;
}

@keyframes fadeInSlideDown {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
