/*
 * 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/ckeditor5-ui/mixins/_button.css";

:root {
	--ck-uploadcare-form-view-width: 700px;
	--ck-uploadcare-external-source-view-height: 350px;
	--ck-uploadcare-color-image-background: oklch(0.97 0 0);
	--ck-uploadcare-color-icon-error: hsl(15, 100%, 43%);
	--ck-uploadcare-color-skeleton: hsl(0, 0%, 98%);
}

.ck .ck-uploadcare-form {
	max-width: 100%;
	width: var(--ck-uploadcare-form-view-width);

	.ck-uploadcare-form__loading {
		.ck-uploadcare-form__loading-spinner {
			width: 100%;
			height: var(--ck-uploadcare-external-source-view-height);
			background-color: var(--ck-uploadcare-color-image-background);

			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.ck-spinner-container {
				margin-bottom: 10px;
			}
		}
	}

	.ck-uploadcare-form__error {
		.ck-uploadcare-form__error-contents {
			width: 100%;
			height: var(--ck-uploadcare-external-source-view-height);
			background-color: var(--ck-uploadcare-color-image-background);

			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			gap: 5px;

			h3 {
				font-weight: 700;
				padding: 0;
				margin: 0;
			}

			.ck-icon {
				color: var(--ck-uploadcare-color-icon-error);
			}

			.ck-button {
				margin-top: 10px;
			}
		}
	}

	.ck-uploadcare-form__skeleton {
		width: 100%;
		height: 115px;

		div {
			height: 50%;
			display: flex;
			box-sizing: border-box;
			min-width: 100%;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			span {
				display: block;
				width: 32px;
				height: 32px;
				background-color: var(--ck-uploadcare-color-skeleton);
			}
		}

		div + div {
			gap: 20px;

			span:first-child {
				position: absolute;
				left: 8px;
				width: 80px;
			}

			span:last-child {
				position: absolute;
				right: 8px;
				width: 80px;
			}
		}

		div:first-child {
			gap: 4px;
		}
	}

	/* The following styles overrides the default Uploadcare styles */

	/* stylelint-disable selector-type-no-unknown */
	.mini-btn {
		display: none;
	}

	.uc-viewport {
		height: var(--ck-uploadcare-external-source-view-height);
	}

	uc-btn-ui button, .uc-primary-btn, .uc-secondary-btn {
		padding: var(--ck-spacing-tiny) var(--ck-spacing-standard);
		min-width: var(--ck-ui-component-min-height);
		min-height: var(--ck-ui-component-min-height);
	}

	.uc-primary-btn, uc-btn-ui.uc-primary button {
		@mixin ck-button-colors --ck-color-button-action;
	}

	.uc-secondary-btn, uc-btn-ui.uc-secondary button {
		@mixin ck-button-colors --ck-color-button-default;
	}

	uc-upload-list {
		& .uc-toolbar {
			gap: var(--ck-spacing-large);

		}

		& .uc-files {
			padding-top: var(--ck-spacing-large);
			max-height: var(--ck-uploadcare-external-source-view-height);
			overflow-y: auto;
		}
	}

	.uc-content {
		padding: var(--ck-spacing-large);
		gap: var(--ck-spacing-large);

		& > .uc-iframe-wrapper {
			height: var(--ck-uploadcare-external-source-view-height);
		}

		& > .uc-toolbar {
			padding: var(--ck-spacing-large) 0 0;
		}
	}

	uc-start-from {
		& .uc-content {
			gap: 0;
		}
	}

	uc-file-item {
		& > .uc-inner {
			font-size: 1em;
		}


		& > .uc-inner:where([finished]) .uc-badge {
			background: var(--ck-color-button-action-active-background);
		}
	}

	uc-external-source .uc-cancel-btn {
		visibility: hidden;
		pointer-events: none;
	}

	uc-activity-header {
		display: none;
	}

	uc-source-list {
		display: none;
	}

	uc-cloud-image-editor-block {
		[icon="closeMax"] .uc-icon_left {
			transform: rotate(90deg);
		}
	}
	/* stylelint-enable selector-type-no-unknown */
}