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

:host {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	overflow-y: auto;

	.loading-details,
	.loading-item {
		overflow: hidden;
	}

	.loading-item-container {
		display: flex;
		padding: 12px 16px;
		flex-direction: column;
		align-items: flex-start;
		border-radius: 10px;
		border-bottom: 1px solid $color-container-background;
		background: $color-white;
		width: 100%;
		box-sizing: border-box;

		.loading-item {
			display: flex;
			align-items: center;
			gap: 16px;
			align-self: stretch;
			width: 100%;
		}

		.loading-details {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 6px;
			width: 100%;

			.title-container {
				display: flex;
				align-items: center;
				gap: 16px;
				align-self: stretch;

				.icon-container {
					position: relative;
					width: 32px;
					height: 32px;
					mat-icon {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						color: $color-plagiarism-identical;
						font-size: 22px;
						width: 22px;
						height: 22px;
						font-style: normal;
						font-weight: 400;
						line-height: normal;

						&.ai-details-icon {
							color: $color-ai-tab !important;
						}
					}
				}
			}
		}
	}

	.skeleton {
		width: fit-content;
		display: flex;
		height: fit-content !important;
		::ng-deep .loader {
			height: 18px !important;
			margin-bottom: 0px !important;
			border-radius: 10px !important;
			opacity: 0.2;
			background-color: $color-medium-dark;
		}
	}
	.circle {
		width: 32px !important;
		height: 32px !important;
		::ng-deep .loader {
			border-radius: 50% !important;
			width: 32px !important;
			height: 32px !important;
		}
	}
	.description-loader {
		flex-grow: 1;
	}

	.table-container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		align-self: stretch;
		border-radius: 8px;
		width: 100%;
		box-shadow: 0px 0px 2px 0px rgba(11, 22, 62, 0.08) inset, 0px 0px 10px 0px rgba(11, 22, 62, 0.04) inset;

		.row-container {
			border-radius: 6px 6px 0px 0px;
			background: rgba(235, 243, 245, 0.4);
			display: flex;
			padding: 8px 10px;
			justify-content: space-between;
			align-items: flex-start;
			align-self: stretch;
		}
	}
}
