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

/* https://github.com/ckeditor/ckeditor5/issues/5598. */
@media only screen and (min-width: 960px) and (max-width: 1024px ) {
	.main .main__content {
		/* Reduce content width including side navigation (340px). */
		max-width: calc( 100% - 340px );
		min-width: auto;
	}
}

/* https://github.com/ckeditor/ckeditor5/issues/1350
https://github.com/ckeditor/ckeditor5-build-decoupled-document/issues/12 */
@media only screen and (min-width: 960px) and (max-width: 1360px) {
	/* https://github.com/ckeditor/ckeditor5/issues/1077 */
	.main .main__content .main__content-inner,
	.main .main__content-wide .main__content-inner {
		padding-left: 30px;
		padding-right: 30px
	}
}

/* https://github.com/ckeditor/ckeditor5/issues/5598. */
@media only screen and (max-width: 1360px) {
	.main .main__content-inner {
		max-width: 960px;
	}
}
/* https://github.com/ckeditor/ckeditor5/issues/5598. */
@media only screen and (min-width: 1360px) {
	.main .main__content--no-toc .main__content-inner {
		/* Because there is `width: auto`, we need to set some minimal value. */
		min-width: 910px;
	}
}

/* https://github.com/ckeditor/ckeditor5/issues/1349 */
.main .navigation-hint_mobile {
	display: none;
}

/* https://github.com/ckeditor/ckeditor5/issues/1349 */
@media only screen and (max-width: 960px) {
	.main .navigation-hint_desktop {
		display: none;
	}

	.main .navigation-hint_mobile {
		display: inline;
	}
}

/* https://github.com/ckeditor/ckeditor5/issues/9700 */
.main .main__content-inner .features-html-output .output-overview-table-icon {
	display: inline;
	margin: 0;
	height: 1rem;
	vertical-align: middle;
	position: relative;
	top: -1px;
}

.main .main__content-inner .features-html-output th {
	background-color: hsl(0, 0%, 96%);
}

/* Tabs navigation component */

.tabs {
	margin: 1.5em 0;

	--tabs-active-background: hsl(0, 0%, 96%);
	--tabs-active-border: hsl(231.35deg 89.21% 52.75%);
	--tabs-list-border-color: hsl(0deg 0% 91.37%);
}

.tabs ul.tabs__list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	border-bottom: 1px solid var(--tabs-list-border-color);
}

.tabs ul.tabs__list li {
	margin: 0;
	display: inline-block;
	text-align: center;
	border-bottom: 2px solid transparent;
}

.tabs ul.tabs__list li a.tabs__list__tab-text {
	text-decoration: none;
	color: initial;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8px 16px;
}

.tabs ul.tabs__list li.tabs__list__tab_selected {
	border-bottom: 2px solid var(--tabs-active-border);
}

.tabs ul.tabs__list li.tabs__list__tab_selected a.tabs__list__tab-text {
	color: var(--tabs-active-border);
}

.tabs .tabs__panel {
	padding: 1.333em 0;
	display: none;
}

.tabs .tabs__panel.tabs__panel_selected {
	display: block;
}