@ckeditor/ckeditor5-ai/theme/aitabs/tabs/tabsview.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
 */

:root {
	--ck-tabs-buttons-container-buttons-vertical-spacing: 0;
	--ck-tabs-panels-container-background: hsl(0, 0%, 100%);
	--ck-tab-button-padding: 12px;
	--ck-tab-button-gap: var(--ck-spacing-medium);
	--ck-color-tabs-buttons-container-background: hsl(0, 0%, 96%);
	--ck-color-tab-button-icon: hsl(0, 0%, 44%);
	--ck-color-tab-button-active-icon: hsl(0, 0%, 44%);
	--ck-color-tab-button-active-border: hsl(0, 0%, 44%);
	--ck-color-tab-button-active-background: hsl(0, 0%, 91%);
}

.ck.ck-tabs {
	display: flex;

	font-size: var(--ck-font-size-base);
	border: 1px solid var(--ck-color-base-border);
	border-radius: var(--ck-border-radius);

	/*
	 * This is essential for avoiding horizontal stretching by children with white-space: nowrap
	 * (see https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout)
	 */
	min-width: 0;

	&.ck-tabs_top {
		flex-direction: column;
	}

	&.ck-tabs_left {
		flex-direction: row;
	}

	&.ck-tabs_right {
		flex-direction: row-reverse;
	}


	.ck-tabs__panels-container {
		transition: width 0.8s ease-in-out;
		transition: height 0.8s ease-in-out;
		background-color: var(--ck-tabs-panels-container-background);
		flex-grow: 1;

		/*
		 * This is essential for avoiding horizontal stretching by children with white-space: nowrap
		 * (see https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout)
		 */
		min-width: 0
	}

	.ck-tabs__buttons-container {
		display: flex;
		background-color: var(--ck-color-tabs-buttons-container-background);
		gap: var(--ck-tab-button-gap);

		&.ck-tabs__buttons-container_top {
			border-top: none;
			border-bottom: 1px solid var(--ck-color-base-border);
			flex-direction: row;
		}

		&.ck-tabs__buttons-container_left {
			border-left: none;
			border-right: 1px solid var(--ck-color-base-border);
		}

		&.ck-tabs__buttons-container_right {
			border-right: none;
			border-left: 1px solid var(--ck-color-base-border);
		}

		&.ck-tabs__buttons-container_left,
		&.ck-tabs__buttons-container_right {
			flex-direction: column;
			padding-top: var(--ck-tabs-buttons-container-buttons-vertical-spacing);
			padding-bottom: var(--ck-tabs-buttons-container-buttons-vertical-spacing);
		}
	}
}