@ckeditor/ckeditor5-ai/theme/aichat/aichat-controls/aichat-controls-loader.css

AI features for CKEditor 5.

/*
 * 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-chat-controls-loader-icon-dot-color: hsl(216, 5%, 81%);
	--ck-ai-chat-controls-loader-icon-dot-active-color: hsl(0, 0%, 20%);
	--ck-ai-chat-controls-loader-color: hsla(0, 0%, 44%, 1);
	--ck-ai-loader-dot-pulse-dot-size: 6px;
	--ck-ai-loader-dot-pulse-width: 40px;
	--ck-ai-loader-dot-pulse-height: 20px;
	--ck-ai-loader-dot-pulse-border-radius: 8px;
	--ck-ai-loader-dot-pulse-animation-delay: 0.3s;
}

.ck-ai-chat-controls {
	.ck-ai-chat-controls-loader {
		display: flex;
		align-items: center;
		color: var(--ck-ai-chat-controls-loader-color);

		& .ck-ai-chat-controls-loader-icon {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: var(--ck-ai-loader-dot-pulse-width);
			height: var(--ck-ai-loader-dot-pulse-height);
			margin-inline-end: var(--ck-spacing-standard);
			padding: var(--ck-spacing-small) var(--ck-spacing-medium-small);
			border-radius: var(--ck-ai-loader-dot-pulse-border-radius);
			background-color: var(--ck-ai-chat-controls-loader-icon-color);
		}

		& .ck-ai-chat-controls-loader-icon-dot {
			width: var(--ck-ai-loader-dot-pulse-dot-size);
			height: var(--ck-ai-loader-dot-pulse-dot-size);
			border-radius: 50%;
			background-color: var(--ck-ai-chat-controls-loader-icon-dot-color);
			flex-shrink: 0;

			animation: ck-ai-loader-dot-pulse var(--ck-ai-chat-controls-loader-animation-duration) infinite;

			&:nth-child(1) {
				animation-delay: 0s;
			}

			&:nth-child(2) {
				animation-delay: var(--ck-ai-loader-dot-pulse-animation-delay);
			}

			&:nth-child(3) {
				animation-delay: calc(var(--ck-ai-loader-dot-pulse-animation-delay) * 2);
			}
		}
	}
}

.ck-ai-chat-controls-loader-wrapper {
	display: flex;
	justify-content: space-between;
}

@keyframes ck-ai-loader-dot-pulse {
	0%, 80%, 100% {
		background-color: var(--ck-ai-chat-controls-loader-icon-dot-color);
	}

	40% {
		background-color: var(--ck-ai-chat-controls-loader-icon-dot-active-color);
	}
}