/*
 * 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
 */

@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rounded.css";

:root {
	--ck-ai-chat-color-icon-outdated: var(--ck-ai-chat-suggestion-icon-default-color);
	--ck-ai-chat-suggestion-container-header-font-size: .9em;
	--ck-ai-background-color-action-button-semi-transparent: hsla(263, 59%, 52%, 0.5);
}

/*
 * Container for the suggestion where the content returned by the AI is displayed.
 *
 * It supports the regular output and "Show preview" mode.
 *
 * It works in the feed (sidebar) and in the dialog/balloon.
 */
.ck.ck-ai-suggestion__container {
	@mixin ck-rounded-corners;

	--ck-border-radius: 4px;

	border: 1px solid var(--ck-color-base-border);
	position: relative;

	& .ck-ai-suggestion__header {
		height: 3.23em; /* 42px */
		border-bottom: 1px solid var(--ck-color-base-border);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 var(--ck-spacing-large);

		& > span {
			font-size: var(--ck-ai-chat-suggestion-container-header-font-size);
			font-weight: bold;
			color: var(--ck-ai-chat-color-icon);
			flex-grow: 1;
		}

		& > .ck-icon {
			width: 14px;
			height: 14px;
			margin-right: var(--ck-spacing-medium);
			color: var(--ck-ai-chat-color-icon);
		}

		& > .ck-switchbutton {
			--ck-switch-button-toggle-width: 2.307em;
			--ck-switch-button-toggle-inner-size: 1em;
			--ck-switch-button-translation: calc(var(--ck-switch-button-toggle-width) - var(--ck-switch-button-toggle-inner-size) - 2px );
			--ck-color-switch-button-off-background: var(--ck-ai-chat-color-icon);

			& .ck-button__label {
				font-size: var(--ck-ai-chat-suggestion-container-header-font-size);
				margin-right: var(--ck-spacing-standard);
			}

			& .ck-button__toggle {
				border-radius: var(--ck-switch-button-toggle-inner-size);

				& .ck-button__toggle__inner {
					border-radius: 100%;
				}
			}
		}
	}

	& .ck-ai-suggestion__body {
		display: flex;
		flex-direction: column;

		& .ck-ai-suggestion__body__content-parts {
			display: flex;
			flex-direction: column;
		}

		& .ck-ai-suggestion__body__content-part {
			position: relative;
			padding-bottom: var(--ck-spacing-large);

			& .ck-ai-suggestion__body__content-part__title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: var(--ck-ai-background-color-action-button);
				height: 2.308em;

				& > .ck-ai-suggestion__body__content-part__icon-title {
					position: absolute;
					left: calc(-1.8 * var(--ck-spacing-large));
					background: var(--ck-color-base-background);
					box-shadow: 0 0 5px 6px var(--ck-color-base-background);
					clip-path: inset(-6px 0 -6px 0);
					border-radius: 100%;
				}

				& > .ck-ai-suggestion__body__content-part__icon-accepted {
					color: var(--ck-color-base-action);
				}

				& > .ck-ai-suggestion__body__content-part__icon-rejected {
					color: var(--ck-color-base-error);
				}

				& > .ck-ai-suggestion__body__content-part__icon-outdated {
					color: var(--ck-ai-chat-color-icon-outdated);
				}

				& > .ck-icon,
				& > .ck-toolbar .ck-icon {
					--ck-icon-size: 1.477em;
				}

				& .ck-toolbar {
					border: 0;

					& .ck-button {
						margin: 0;
						color: var(--ck-ai-chat-suggestion-icon-default-color);

						&:hover {
							background-color: var(--ck-ai-button-tertiary-filled-hover-background-color);
						}
					}
				}
			}

			& .ck-ai-suggestion__body__content-part__content {
				& :last-child {
					padding-bottom: 0;
					margin-bottom: var(--ck-spacing-medium);
				}

				&.ck.ck-content:not(:focus) {
					/* Reset default padding and border of `ck-content` class. */
					padding: 0;
					border: 0;
				}
			}

			&:hover .ck-ai-suggestion__body__content-part__title .ck-toolbar {
				visibility: visible;
				opacity: 1;
			}

			&:not(:last-child)::after {
				content: '...';
				width: 100%;
				text-align: center;
				display: block;
				clear: both;
			}
		}

		& .ck-ai-suggestion__body__content-part_pending:hover {
			& .ck-toolbar .ck-icon {
				color: var(--ck-ai-background-color-action-button);
			}
		}

		/* TODO: This is only a temporary implementation for preview demo purposes. Make it nice. */
		& .ck-ai-suggestion__body__content-part_active:hover::before {
			content: '';
			position: absolute;
			left: calc((-1 * var(--ck-spacing-large)) - 1px);
			top: 5px;
			height: 100%;
			border-left: 3px solid var(--ck-ai-chat-suggestion-border-hover-color);
		}

		& .ck-ai-suggestion__body__content-part_active:last-child::before {
			height: calc(100% - 10px);
		}

		& .ck-ai-suggestion__body__content-part_active:last-child:first-child::before {
			display: none;
		}

		& .ck-ai-suggestion__body__content-part_accepted,
		& .ck-ai-suggestion__body__content-part_rejected,
		& .ck-ai-suggestion__body__content-part_outdated {
			& .ck-ai-suggestion__body__content-part__content {
				opacity: 0.5;
			}

			& .ck-ai-suggestion__body__content-part__title
			:not(.ck-ai-suggestion__body__content-part__icon-title):not(.ck-ai-suggestion__body__content-part__icon-title *) {
				opacity: 0.5;
			}

			/* stylelint-disable no-descending-specificity */
			& .ck-ai-suggestion__body__content-part__icon-title {
				/* Icon can not be transparent because the border would be visible, it has to be controlled by the color. */
				color: var(--ck-ai-background-color-action-button-semi-transparent);
			}
			/* stylelint-enable no-descending-specificity */

			&::after {
				opacity: 0.5;
			}
		}

		/* The warning is displayed when some parts of the suggestion are empty. */
		& .ck.ck-ai-chat__feed__item.ck-ai-notification_warning {
			margin-left: 0;
			margin-right: 0;
			margin-bottom: var(--ck-spacing-large);
			width: 100%;
		}
	}

	& .ck-ai-suggestion__body,
	& .ck-ai-suggestion__changes {
		padding: var(--ck-spacing-large);
		padding-bottom: 0px;
	}
}