/*
 * What you're currently looking at is the source code of a legally protected, proprietary software.
 * CKEditor 5 Collaboration is licensed under a commercial license and protected by copyright law. Where not otherwise indicated,
 * all CKEditor 5 Collaboration content is authored by CKSource engineers and consists of CKSource-owned intellectual property.
 *
 * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */

:root {
	--ck-ai-review-color-text: hsla(263, 59%, 52%, 1);
	--ck-ai-review-border-color-button: hsla(262, 51%, 80%, 1);
}

.ck.ck-ai-review-mode {
	& .ck-ai-review-mode__check-run {
		position: relative;
		height: 100%;
		overflow: auto;
		display: flex;
		flex-direction: column;

		&:has( .ck-ai-review-mode__check-run-skeleton-container:not(.ck-hidden) ) {
			overflow: hidden;
		}

		& .ck-ai-review-mode__check-run-result {
			opacity: 0;
			visibility: hidden;
			box-shadow: 3px 0px 0px 0px transparent inset;
			padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);

			animation: ck-ai-check-run-list-item-show 0.25s 0.1s forwards;

			transition: box-shadow 0.3s ease-in-out;
			transition-behavior: allow-discrete;

			@media (prefers-reduced-motion: reduce) {
				animation: none;
				opacity: 1;
				visibility: visible;
				transition-duration: 0s;
			}

			&:not(:first-child) {
				border-top: 1px solid var(--ck-color-base-border);
			}

			&:last-child {
				position: relative;
				contain: layout;
			}

			&:last-child::after {
				display: block;
				content: "";
				height: 1px;
				background: var(--ck-color-base-border);
				position: absolute;
				left: 0;
				right: 0;
				bottom: -1px;
			}

			& .ck-suggestion-marker {
				white-space: break-spaces;
			}

			&:hover {
				box-shadow: 3px 0px 0px 0px var(--ck-ai-review-check-list-item-hover-border-color) inset;
			}

			&.ck-ai-review-mode__check-run-result_active {
				box-shadow: 3px 0px 0px 0px var(--ck-ai-review-check-list-item-active-border-color) inset;


				& .ck-suggestion-marker-insertion {
					border-top: 3px solid var(--ck-ai-suggestion-marker-insertion-border-color-active);
					border-bottom: 3px solid var(--ck-ai-suggestion-marker-insertion-border-color-active);
					background: var(--ck-ai-suggestion-marker-insertion-background-color-active);
				}

				& .ck-suggestion-marker-deletion {
					border-top: 3px solid var(--ck-ai-suggestion-marker-deletion-border-color-active);
					border-bottom: 3px solid var(--ck-ai-suggestion-marker-deletion-border-color-active);
					background: var(--ck-ai-suggestion-marker-deletion-background-color-active);
				}
			}

			&.ck-ai-review-mode__check-run-result_removing {
				animation: ck-ai-check-run-item-remove 0.2s forwards;
			}
		}

		& .ck-ai-review-mode__check-run-results-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: var(--ck-spacing-standard);

			padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
			border-bottom: 1px solid var(--ck-color-base-border);

			& .ck-ai-review-mode__check-run-results-header-title-wrapper {
				display: flex;
				align-items: flex-start;
				min-width: 0;

				& > .ck-ai-spinner {
					transition: width 0.25s, opacity 0.25s, margin-inline-end 0.25s, display 0.25s;
					transition-behavior: allow-discrete;
					margin-inline-end: var(--ck-spacing-large);

					&.ck-hidden {
						width: 0;
						opacity: 0;
						margin-inline-end: 0;
					}
				}

				& .ck-ai-review-mode__check-run-results-header-title-content {
					min-width: 0;

					& .ck-ai-review-mode__check-run-results-header-title,
					& .ck-ai-review-mode__check-run-results-header-subtitle {
						display: block;
						align-self: center;
						white-space: nowrap;
						overflow: hidden;
						max-width: 100%;
						text-overflow: ellipsis;
						line-height: 1.5;
					}

					& .ck-ai-review-mode__check-run-results-header-title {
						font-weight: bold;
					}
				}
			}

			& .ck-ai-review-mode__check-run-results-header-buttons {
				display: flex;
				gap: var(--ck-spacing-standard);
				flex-shrink: 0;
				align-items: center;
				/* To prevent jumping when visibility of buttons is changing.
				TODO: probably it will be replaced with different loader UI. */
				min-height: 30px;
			}
		}

		& .ck-ai-review-mode__check-run-results-wrapper {
			position: relative;
			height: 100%;
			overflow: auto;

			&:has( .ck-ai-review-mode__check-run-skeleton-container:not(.ck-hidden) ) {
				overflow: hidden;
			}
		}

		& .ck-ai-review-mode__check-run-skeleton-container {
			position: absolute;
			width: 100%;
			top: 0;
			height: 100%;

			& .ck-ai-review-mode__check-run-skeleton-item {
				position: static;
				height: auto;
				padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
				border-bottom: 1px solid var(--ck-color-base-border);

				&.ck-ai-skeleton {
					--ck-ai-skeleton-gap: var(--ck-spacing-small);
				}
			}
		}

		& .ck-ai-review-mode__check-run-error-container {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: var(--ck-spacing-medium-small);
			padding: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-standard) var(--ck-spacing-large);

			&.ck-ai-review-mode__check-run-error-container_border-bottom {
				border-bottom: 1px solid var(--ck-color-base-border);
			}

			& .ck-ai-review-mode__check-run-error-retry-button {
				font-size: 11.7px;
				min-height: unset;
				border: 1px solid var(--ck-ai-review-border-color-button);
				border-radius: var(--ck-border-radius);
				gap: var(--ck-spacing-small);
				color: var(--ck-ai-review-color-text);
			}

			&:not(.ck-hidden) + .ck-ai-review-mode__check-run-results-container:not(.ck-hidden) {
				& > .ck-ai-review-mode__check-run-result:first-child {
					border-top: 1px solid var(--ck-color-base-border);
				}
			}
		}
	}
}

@keyframes ck-ai-check-run-list-item-show {
	0% {
		opacity: 0;
		visibility: hidden;
	}
	100% {
		opacity: 1;
		visibility: visible;
	}
}

@keyframes ck-ai-check-run-item-remove {
	0% {
		opacity: 1;
		visibility: visible;
		display: block;
	}
	100% {
		opacity: 0;
		visibility: hidden;
		display: none;
	}
}