/*
 * 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-2024, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

/*
 * These definitions bring violet accents (tint) across the AI UI.
 */
:root {
	--ck-ai-form-submit-button-text-color: 						var(--ck-color-text);
	--ck-ai-form-submit-button-border-color: 					transparent;
	--ck-ai-form-submit-button-disabled-border-color: 			transparent;
	--ck-ai-toolbar-button-hover-color: 						var(--ck-color-text);
	--ck-color-ai-selection:									hsla(201, 100%, 56%, 0.3);
}

/* Note: This class name is mentioned in the guide and acts like a public API. */
.ck-ai-assistant-ui_theme {
	--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-background: 						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%);

	--ck-color-list-button-hover-background: 					hsl(262.1,100%,96.3%);

	--ck-ai-form-content-background: 							hsl(0,0%,97.6%);
	--ck-ai-form-submit-button-text-color: 						var(--ck-color-button-on-color);
	--ck-ai-form-submit-button-border-color: 					var(--ck-color-button-action-background);
	--ck-ai-form-submit-button-disabled-border-color: 			var(--ck-color-button-action-disabled-background);
	--ck-ai-toolbar-button-hover-color: 						var(--ck-color-button-on-color);

	--ck-color-ai-selection:									hsl(262.5,60%,90%);
}

/*
 * Apply the theme colors for specific elements.
 */
.ck-ai-commands-dropdown > .ck-button:hover,
.ck-ai-assistant-button:hover {
	color: var(--ck-ai-toolbar-button-hover-color);
}

/*
 * Classes used by the "fake visual selection" displayed in the content
 * when the AI dialog is open.
 *
 * Narrow down to <span> to prevent changing background for widgets and nested editables.
 */
.ck span.ck-fake-ai-selection {
	background: var(--ck-color-ai-selection);
}

.ck .ck-widget.ck-fake-ai-selection {
	outline-color: var(--ck-color-ai-selection);
}

/*
 * Classes used by the "fake visual candidate selection" displayed in the content when an input
 * in the AI dropdown has focus (the browser does not render the native selection in this state).
 *
 * Narrow down to <span> to prevent changing background for widgets and nested editables.
 */
.ck span.ck-fake-ai-selection-candidate {
	background: var(--ck-color-ai-selection);
}

/* A collapsed fake visual selection. */
.ck .ck-fake-ai-selection_collapsed {
	height: 100%;
	border-right: 1px solid var(--ck-color-base-text);
	margin-right: -1px;
	outline: solid 1px hsla(0, 0%, 100%, .5);
}

/*
 * Styles of the AI response field. The margins, font sizes and line-heights have been reduced
 * to save space.
 *
 * Note: This class name is mentioned in the guide and acts like a public API.
 */
.ck.ck-content.ck-ai-form__content-field {
	& h2 {
		font-size: 1.3em;
	}

	& h3 {
		font-size: 1.2em;
	}

	& h4, & h5, & h6 {
		font-size: 1.1em;
	}

	& h2, & h3, & h4, & h5, & h6, & p, & ul, & ol {
		margin-block-start: .5em;
		margin-block-end: .5em;
		line-height: 1.7em;
	}

	& > :first-child {
		margin-top: 0;
	}

	& > :last-child {
		margin-bottom: 0;
	}
}