/*
 * 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 {
	--ai-skeleton-z-index: calc( var(--ck-z-default) + 1 );
	--ck-ai-skeleton-item-background: linear-gradient(90deg, hsl(0, 0.00%, 98.00%) 0%, hsl(0, 0.00%, 94.10%) 50%, hsl(0, 0.00%, 98.00%) 100%);
	--ck-ai-skeleton-animation-duration: 1s;
	--ck-ai-skeleton-gap: var(--ck-spacing-extra-large);
}

.ck.ck-ai-skeleton {
	position: absolute;
	inset: 0;
	z-index: var(--ai-skeleton-z-index);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--ck-ai-skeleton-gap) 0;
	padding: var(--ck-spacing-extra-large) var(--ck-spacing-large) var(--ck-spacing-large);
	width: 100%;
	height: 100%;
	background-color: var(--ck-color-base-background);
	opacity: 1;
	transition: opacity .4s, display .4s allow-discrete;
	transition-delay: 350ms;

	&.ck-hidden {
		transition-delay: 0ms;
		opacity: 0;
	}

	@starting-style {
		opacity: 0;
	}

	& > .ck.ck-ai-skeleton__item {
		background: var(--ck-ai-skeleton-item-background);
		background-size: 200% 100%;
		animation: var(--ck-ai-skeleton-animation-duration) ck-ai-skeleton-shine linear infinite;
		width: 100%;
	}
}

@keyframes ck-ai-skeleton-shine {
	to {
		background-position-x: -200%;
	}
}