@ckeditor/ckeditor5-ai/theme/common/ainotification.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-notification-error-color-background: hsla(15, 100%, 97%, 1);
	--ck-ai-notification-warning-color-background: hsla(36, 100%, 65.10%, 0.10);

	--ck-ai-notification-error-color-border: hsla(14, 100%, 68%, 1);
	--ck-ai-notification-warning-color-border: hsla(36, 100%, 65%, 1);

	--ck-ai-border-radius: calc(var(--ck-border-radius) * 2);
}

.ck.ck-ai-notification {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ck-spacing-medium);
	width: fit-content;

	padding: var(--ck-spacing-standard);
	border-radius: var(--ck-ai-border-radius);

	&.ck-ai-notification_error {
		background-color: var(--ck-ai-notification-error-color-background);
		border: 1px solid var(--ck-ai-notification-error-color-border);
	}

	&.ck-ai-notification_warning {
		background-color: var(--ck-ai-notification-warning-color-background);
		border-color: var(--ck-ai-notification-warning-color-border);
	}

	& > p {
		flex: 1;
		white-space: normal;
		color: var(--ck-color-base-text);
		line-height: var(--ck-line-height-base);
	}

	& > .ck-button {
		--ck-icon-font-size: 0.666em;

		&.ck-ai-notification_error__dismiss-button {
			--ck-icon-font-size: 0.666em;
			--ck-ui-component-min-height: 16px;

			padding: 0;
			flex-shrink: 0;
		}
	}

	&.ck-ai-notification__full-width {
		& > p {
			max-width: 100%;
		}
	}
}