@ckeditor/ckeditor5-ai/theme/aichat/aiminitoolbar.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
 */

.ck.ck-ai-mini-toolbar {
	--ck-color-button-action-background: hsl(263.2, 59.2%, 52%);
	--ck-color-button-default-hover-background: hsl(262.1, 100%, 96.3%);
	--ck-color-button-default-active-background: hsl(262.1, 100%, 96.3%);
	--ck-color-button-on-background: hsl(262.1, 100%, 96.3%);
	--ck-color-button-on-hover-background: hsl(262.1, 100%, 96.3%);
	--ck-color-button-on-active-background: hsl(262.1, 100%, 96.3%);
	--ck-color-button-on-disabled-background: hsl(262.1, 100%, 96.3%);
	--ck-color-button-on-color: hsl(263.2, 59.2%, 52%);
	--ck-color-button-action-hover-background: hsl(262.6, 58.9%, 49.6%);
	--ck-color-button-action-active-background: hsl(262.6, 58.9%, 49.6%);
	--ck-color-button-action-disabled-background: hsl(263.8, 59.3%, 75.9%);

	position: absolute;
	right: var(--ck-spacing-large);
	bottom: 0;
	transform: translateY(50%);



	& .ck-ai-interaction-counter {
		color: var(--ck-ai-chat-color-icon);
		letter-spacing: 2.6px;
		font-family: var(--ck-ai-balloon-font-family);
	}

	& .ck.ck-button {
		font-size: .9em;
		font-family: var(--ck-ai-chat-font-family);
		color: var(--ck-ai-chat-color-icon);

		&.ck-on {
			color: var(--ck-ai-background-color-action-button);
		}

		&.ck-button_with-text {
			min-height: 2.1em;
			box-sizing: border-box;
			flex-direction: row-reverse;
			padding-right: 0.3em;
			padding-left: 0.3em;

			span {
				line-height: 1.4em;
			}

			svg {
				margin-left: var(--ck-spacing-medium);
				margin-right: 0;
				--ck-icon-size: 16px
			}
		}

		&.ck-ai-mini-toolbar-copy-button {
			& .ck-ai-mini-toolbar-copy-button__check-mark {
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translate(50%, -50%);
				color: var(--ck-color-base-action);
				display: none;
			}

			&.ck-ai-mini-toolbar-copy-button_copied {
				& .ck-button__icon {
					display: none;
				}

				& .ck-ai-mini-toolbar-copy-button__check-mark {
					display: block;
					animation-duration: 1s;
					animation-name: ck-ai-mini-toolbar-copy-animation;
					animation-iteration-count: 1;
					animation-timing-function: ease-out;
				}
			}
		}
	}
}

@keyframes ck-ai-mini-toolbar-copy-animation {
	0% {
		clip-path: inset(0 100% 0 0);
	}

	50% {
		clip-path: inset(0 0 0 0);
	}

	100% {
		clip-path: inset(0 0 0 0);
	}
}