/*
 * 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-review-check-list-item-hover-border-color: hsla(262, 64%, 78%, 1);
	--ck-ai-review-check-list-item-active-border-color: hsla(263, 59%, 52%, 1);
	--ck-ai-review-check-list-item-title-color: var(--ck-color-text);
	--ck-ai-review-check-list-item-description-color: hsla(0, 0%, 44%, 1);
	--ck-ai-review-check-list-item-title-icon-color: hsla(0, 0%, 44%, 1);
	--ck-ai-review-check-list-model-dropdown-width: 426px;
	--ck-ai-review-check-list-model-dropdown-max-height: 340px;
	--ck-ai-review-check-list-model-dropdown-arrow-drop-shadow: 0 -2px 0px var(--ck-color-shadow-drop);
	--ck-ai-review-check-list-model-dropdown-hover-background-color: hsla(262, 100%, 96%, 1);
	--ck-ai-review-check-list-model-dropdown-active-color: hsla(263, 59%, 52%, 1);
}

.ck.ck-ai-review-mode {
	& * {
		font-family: var(--ck-ai-review-font-family) !important;
	}

	& .ck-ai-review-mode__check-list {
		position: relative;
		height: 100%;
		overflow: auto;

		& > .ck-ai-review-mode__check-list-item {
			padding: var(--ck-spacing-extra-large) var(--ck-spacing-large);
			border-bottom: 1px solid var(--ck-color-base-border);
			box-shadow: 3px 0px 0px 0px transparent inset;
			opacity: 0;
			visibility: hidden;

			transition: box-shadow 0.3s ease-in-out;

			@media (prefers-reduced-motion: reduce) {
				transition-duration: 0s;
			}

			& .ck-ai-review-mode__check-list-item-description {
				color: var(--ck-ai-review-check-list-item-description-color);
			}

			& .ck-ai-review-mode__check-list-item-title-text,
			& .ck-ai-review-mode__check-list-item-description {
				white-space: normal;
				line-height: 1.3;
			}

			&:hover {
				cursor: pointer;

				& .ck-ai-review-mode__check-list-item-title-text,
				& .ck-ai-review-mode__check-list-item-description {
					cursor: pointer;
				}
			}

			&.ck-ai-review-mode__check-list-item_rendered {
				opacity: 1;
				visibility: visible;

				transition: box-shadow 0.3s ease-in-out,
					opacity 0.1s calc(0.05s * var(--ck-ai-review-check-list-item-index)),
					visibility 0.1s calc(0.05s * var(--ck-ai-review-check-list-item-index));

				@media (prefers-reduced-motion: reduce) {
					opacity: 1;
					visibility: visible;
				}
			}

			&.ck-ai-review-mode__check-list-item_selected {
				box-shadow: 3px 0px 0px 0px var(--ck-ai-review-check-list-item-active-border-color) inset;
			}

			& .ck-ai-review-mode__check-list-item-title {
				display: flex;
				justify-content: space-between;
				margin-block-end: var(--ck-spacing-tiny);

				& > .ck-ai-review-mode__check-list-item-title-text {
					flex-grow: 1;
					color: var(--ck-ai-review-check-list-item-title-color);
					font-weight: 700;
				}

				& > .ck.ck-icon.ck-ai-review-mode__check-list-item-title-icon {
					--ck-icon-size: 20px;

					flex-shrink: 0;
					margin-inline-start: var(--ck-spacing-small);
					color: var(--ck-ai-review-check-list-item-title-icon-color);

					opacity: 0;
					visibility: hidden;

					transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;

					@media (prefers-reduced-motion: reduce) {
						transition-duration: 0s;
					}
				}
			}

			&:not(.ck-ai-review-mode__check-list-item_selected):hover {
				box-shadow: 3px 0px 0px 0px var(--ck-ai-review-check-list-item-hover-border-color) inset;

				& .ck-ai-review-mode__check-list-item-title > .ck.ck-icon.ck-ai-review-mode__check-list-item-title-icon {
					opacity: 1;
					visibility: visible;
				}
			}

			/* Parameterized form view. */
			& .ck-ai-review-mode__check-list-item-parameterized {
				& .ck.ck-form__row {
					padding-left: 0;
					padding-right: 0;

					& > .ck.ck-ai-review-mode__check-list-item-parameterized-form-element {
						flex: 1;

						& > *:first-child {
							width: 100%;
						}

						&.ck-ai-review-mode__check-list-item-parameterized-form-element_dropdown {
							& .ck-button.ck-dropdown__button {
								border-color: hsl(216, 5%, 81%);

								& > .ck-button__label {
									width: 100%;
								}
							}
						}
					}

					& .ck.ck-button {
						flex-shrink: 0;
					}

					& .ck.ck-labeled-field-view {
						width: 100%;
					}
				}
			}

			& .ck-ai-review-mode__check-list-item-custom-actions {
				& .ck.ck-form__row {
					& .ck.ck-input.ck-textarea.ck-review-mode__prompt-input {
						width: 100%;
					}

					& .ck-ai-review-mode__check-list-item-custom-actions-footer {
						display: flex;
						width: 100%;
						align-items: center;
						justify-content: space-between;

						& .ck-ai-review-mode__check-list-item-parameterized-custom-actions-buttons {
							display: flex;
							gap: var(--ck-spacing-small);
						}
					}
				}
			}

			& .ck-ai-review-mode__check-list-item-model-dropdown {

				& > .ck.ck-button.ck-dropdown__button {
					font-size: .9em;

					&.ck-on,
					&:active {
						background-color: var(--ck-ai-button-secondary-active-background-color);
						color: var(--ck-ai-review-check-list-model-dropdown-active-color);
					}

					&:hover:not(.ck-disabled) {
						background-color: var(--ck-ai-review-check-list-model-dropdown-hover-background-color);
						color: var(--ck-ai-review-check-list-model-dropdown-active-color);
					}

					& > .ck.ck-button__label {
						width: auto;
					}
				}

				& .ck-dropdown__panel {
					width: var(--ck-ai-review-check-list-model-dropdown-width);
					padding-top: var(--ck-spacing-standard);
					top: calc(100% + var(--ck-balloon-arrow-height));
					bottom: auto;

					&.ck-dropdown__panel_se {
						&::before,
						&::after {
							content: '';
							position: absolute;
							left: calc(2 * var(--ck-balloon-arrow-half-width));
							top: calc(-1 * var(--ck-balloon-arrow-height) + 2px);
							width: 0;
							height: 0;
							border-style: solid;
							border-width: 0 var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-half-width);
							border-color: transparent transparent var(--ck-color-panel-background) transparent;
						}

						&::before {
							z-index: var(--ck-balloon-panel-arrow-z-index);
							margin-bottom: calc(-1 * var(--ck-balloon-border-width));
							filter: drop-shadow(var(--ck-ai-review-check-list-model-dropdown-arrow-drop-shadow));
						}

						&::after {
							z-index: calc(var(--ck-balloon-panel-arrow-z-index) + 1);
							margin-bottom: calc(var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width));
						}

						& > .ck-list {
							max-height: var(--ck-ai-review-check-list-model-dropdown-max-height);
							overflow-y: scroll;
						}
					}

					& > .ck.ck-list {
						gap: var(--ck-spacing-medium-small);

						& > .ck.ck-list__item {
							& > .ck.ck-button.ck-list-item-button {
								align-items: baseline;

								&:hover:not(.ck-disabled) {
									background-color: var(--ck-ai-button-secondary-hover-background-color);
								}

								& .ck-list-item-button__check-holder {
									flex-shrink: 0;
								}

								& .ck-ai-review-mode__check-list-item-model-dropdown-name {
									line-height: 1.3;
									font-weight: 500;
								}

								& .ck-ai-review-mode__check-list-item-model-dropdown-description {
									padding-top: var(--ck-spacing-tiny);
									line-height: 1.3;

									& > span {
										color: var(--ck-ai-review-color-icon);
										line-height: 1;
										white-space: normal;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}