/* Make longer names in TOC table visible */
div:has(> .toc-wrapper) {
	overflow: visible;
}

/* Remove indent from TOC table */
ul.toc-list ul.toc-list {
	border-left: unset !important;

	li.toc-list-item {
		margin-left: 0 !important;
	}
}

/* Fix dark mode table striping */

.sbdocs.sbdocs-content
	:not(.ds-sb-table-style-images)
	+ :where(table:not(.sb-anchor, .sb-unstyled, .sb-unstyled table))
	thead
	tr {
	background-color: var(--color-gray-120);
}

.sbdocs.sbdocs-content
	:not(.ds-sb-table-style-images)
	+ :where(table:not(.sb-anchor, .sb-unstyled, .sb-unstyled table))
	tr:nth-of-type(2n) {
	background-color: var(--color-gray-120);
}

/* Special-purpose TOC and H2 icons */

/* stylelint-disable selector-max-id, no-irregular-whitespace */
a.toc-link.node-name--H2[href='#component-api'],
a.toc-link.node-name--H2[href='#component-notes'],
a.toc-link.node-name--H2[href='#constants-overview'],
a.toc-link.node-name--H2[href='#contexts'],
a.toc-link.node-name--H2[href='#enums-overview'],
a.toc-link.node-name--H2[href='#helper-components'],
a.toc-link.node-name--H2[href='#helper-functions'],
a.toc-link.node-name--H2[href='#helper-hooks'],
a.toc-link.node-name--H2[href='#helper-types'],
a.toc-link.node-name--H2[href='#in-the-package'],
a.toc-link.node-name--H2[href='#re-exports'],
a.toc-link.node-name--H2[href='#styling-options'],
a.toc-link.node-name--H2[href='#usage-examples'],
a.toc-link.node-name--H2[href='#try-it-out'] {
	white-space: nowrap;
}

h2#component-api::before,
a.toc-link.node-name--H2[href='#component-api']::before {
	content: 'ℹ️ ';
}

h2#component-notes::before,
a.toc-link.node-name--H2[href='#component-notes']::before {
	content: '✍️ ';
}

h2#constants-overview::before,
a.toc-link.node-name--H2[href='#constants-overview']::before {
	content: '↳ ';
}

h2#contexts::before,
a.toc-link.node-name--H2[href='#contexts']::before {
	content: '↳ ';
}

h2#enums-overview::before,
a.toc-link.node-name--H2[href='#enums-overview']::before {
	content: '↳ ';
}

h2#helper-components::before,
a.toc-link.node-name--H2[href='#helper-components']::before {
	content: '↳ ';
}

h2#helper-functions::before,
a.toc-link.node-name--H2[href='#helper-functions']::before {
	content: '↳ ';
}

h2#helper-hooks::before,
a.toc-link.node-name--H2[href='#helper-hooks']::before {
	content: '↳ ';
}

h2#helper-types::before,
a.toc-link.node-name--H2[href='#helper-types']::before {
	content: '↳ ';
}

h2#in-the-package::before,
a.toc-link.node-name--H2[href='#in-the-package']::before {
	content: '📦 ';
}

h2#re-exports::before,
a.toc-link.node-name--H2[href='#re-exports']::before {
	content: '↳ ';
}

h2#styling-options::before,
a.toc-link.node-name--H2[href='#styling-options']::before {
	content: '🖼️ ';
}

h2#usage-examples::before,
a.toc-link.node-name--H2[href='#usage-examples']::before {
	content: '👉 ';
}

h2#try-it-out::before,
a.toc-link.node-name--H2[href='#try-it-out']::before {
	content: '🧬 ';
}
/* stylelint-enable selector-max-id, no-irregular-whitespace */

/* Fix zoom for components with `position: fixed` */

html,
body {
	height: 100vh; /* this must not be `min-height`, it would not work correctly */
}

/* Force canvas theme background */

.ds-sb-canvas-background.ds-sb-canvas-background {
	background: var(--color-layer-level-0);
}

/* Special styling */

.ds-sb-space-before::before {
	content: ' ';
}

/* Badge on Welcome page */
div.ds-sb-welcome-page-badge {
	top: -12px;
	position: relative;
	font-family: var(--font-family);
	font-size: var(--font-size-headline-5);
}

/* Flags */
div.ds-sb-flags {
	float: right;
	margin-top: 12px;
}

div.ds-sb-flags span {
	padding-left: 18px;
	font-weight: bold;
	font-family: var(--font-family);
	font-size: 14px;
	line-height: 24px;
	color: var(--color-gray-60);
}

/* Overview */

div.ds-sb-overview-package {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-8);
	margin-top: var(--space-10);
}

/* DS Markdown Links */
b.ds-sb-link {
	font-weight: normal;
}

b.ds-sb-link::after {
	content: '🔗';
	opacity: 0.3;
	font-size: 80%;
	transition: opacity 180ms ease-in-out;
}

b.ds-sb-link:hover::after {
	content: '🔗';
	opacity: 0.7;
	transition: opacity 180ms ease-in-out;
}

/* Custom DS box styles */
p.ds-sb-infobox,
p.ds-sb-tipbox,
p.ds-sb-warnbox {
	position: relative;
	margin: 0 0 0 28px;
	font-size: 80%;
}

p.ds-sb-infobox::before {
	content: 'ℹ️';
	position: absolute;
	left: -28px;
}

p.ds-sb-tipbox::before {
	content: '✍️';
	position: absolute;
	left: -28px;
}

p.ds-sb-warnbox::before {
	content: '⚠️';
	position: absolute;
	left: -28px;
}

/* Color previews */

div.ds-sb-color-info::before {
	content: '';
	float: left;
	display: block;
	box-sizing: border-box;
	border: 1px solid #777;
	width: 20px;
	height: 20px;
	margin-right: var(--space-3);
}

div.ds-sb-color-info.chartColorGray::before {
	background-color: var(--color-chart-gray);
}

div.ds-sb-color-info.chartColorDeepPurple::before {
	background-color: var(--color-chart-deep-purple);
}

div.ds-sb-color-info.chartColorPurple::before {
	background-color: var(--color-chart-purple);
}

div.ds-sb-color-info.chartColorPink::before {
	background-color: var(--color-chart-pink);
}

div.ds-sb-color-info.chartColorDeepPink::before {
	background-color: var(--color-chart-deep-pink);
}

div.ds-sb-color-info.chartColorBrown::before {
	background-color: var(--color-chart-brown);
}

div.ds-sb-color-info.chartColorDeepRed::before {
	background-color: var(--color-chart-deep-red);
}

div.ds-sb-color-info.chartColorRed::before {
	background-color: var(--color-chart-red);
}

div.ds-sb-color-info.chartColorOrange::before {
	background-color: var(--color-chart-orange);
}

div.ds-sb-color-info.chartColorYellow::before {
	background-color: var(--color-chart-yellow);
}

div.ds-sb-color-info.chartColorLime::before {
	background-color: var(--color-chart-lime);
}

div.ds-sb-color-info.chartColorLightGreen::before {
	background-color: var(--color-chart-light-green);
}

div.ds-sb-color-info.chartColorGreen::before {
	background-color: var(--color-chart-green);
}

div.ds-sb-color-info.chartColorTeal::before {
	background-color: var(--color-chart-teal);
}

div.ds-sb-color-info.chartColorCyan::before {
	background-color: var(--color-chart-cyan);
}

div.ds-sb-color-info.chartColorBlue::before {
	background-color: var(--color-chart-blue);
}

div.ds-sb-color-info.chartColorIndigo::before {
	background-color: var(--color-chart-indigo);
}
/* these are colors from `avatar.module.scss` */
div.ds-sb-color-info.chartColorDefault::before {
	background-color: var(--color-gray-40);
}

div.ds-sb-color-info.chartColorChatbot::before {
	background: linear-gradient(135deg, #1a91ff 0%, #263dec 100%);
}

/* Flex decorator */

div.ds-sb-decorator-flex {
	display: flex;
	gap: var(--space-2);
}

/* Horizontal centered decorator */

div.ds-sb-decorator-horizontally-centered {
	display: flex;
	justify-content: center;
}

/* Table styles */

span.ds-sb-table-style-props2 + table,
span.ds-sb-table-style-props3 + table {
	width: 100%;

	tbody {
		td:first-of-type {
			width: 35%;
		}
	}
}

span.ds-sb-table-style-props2c + table {
	width: 100%;

	tbody {
		td:first-of-type {
			width: 45%;
		}
	}
}

span.ds-sb-table-style-props3 + table tbody td:nth-of-type(2) {
	width: 200px;
}

span.ds-sb-table-style-info2 + table,
span.ds-sb-table-style-info3 + table {
	width: 100%;

	tbody {
		td:first-of-type {
			width: 20%;
		}
	}
}

span.ds-sb-table-style-info3 + table tbody td:nth-of-type(2) {
	width: 15%;
}

span.ds-sb-table-style-info3c + table {
	width: 100%;

	tbody {
		td:first-of-type {
			width: 25%;
		}

		td:nth-of-type(2) {
			width: 10%;
			text-align: center;
		}
	}
}

span.ds-sb-table-style-images + table {
	width: 100%;
	border-radius: var(--border-radius-medium);
	overflow: hidden;

	tbody {
		tr:nth-of-type(2n) {
			background-color: var(--color-gray-120);
		}
	}
}

/* (dornakm) the theme switcher needs to be reviewed and refactored */
/* stylelint-disable selector-max-id */
#storybook-docs
	.sbdocs.sbdocs-content[data-theme='dark']
	span.ds-sb-table-style-images
	+ table {
	thead tr {
		background-color: var(--color-gray-120);
	}
}

#storybook-docs
	.sbdocs.sbdocs-content:not([data-theme='dark'])
	span.ds-sb-table-style-images
	+ table {
	background: var(--color-gray-20);

	th,
	td {
		color: var(--color-gray-120);

		code {
			opacity: 0.9;
			background-color: var(--color-gray-30);
			color: inherit;
		}
	}

	tbody {
		tr:nth-of-type(2n) {
			background-color: var(--color-gray-30);
		}
	}
}
/* stylelint-enable selector-max-id */

/* Theme switcher */

span.ds-db-theme-switcher {
	position: fixed;
	top: 4px;
	left: 160px;
	display: flex;
	gap: var(--space-2);
	border-radius: var(--border-radius-medium);
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-family);
	font-size: var(--font-size-body-medium);
	font-weight: var(--font-weight-bold);
	color: #029cfd;
	background: var(--color-gray-110);
	cursor: pointer;

	&:hover {
		background: rgba(2, 156, 253, 0.14);
	}

	> span {
		font-size: inherit;
	}
}

/* stylelint-disable selector-max-id */
#storybook-docs
	.sbdocs.sbdocs-content[data-theme='dark']
	[data-ds-theme-switcher='dark'] {
	display: none;
}

#storybook-docs
	.sbdocs.sbdocs-content:not([data-theme='dark'])
	[data-ds-theme-switcher='light'] {
	display: none;
}
/* stylelint-enable selector-max-id */

/* Overview builder styles */

div.builder-overview-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

div.builder-overview-wrapper .break {
	flex-basis: 100%;
	height: 0;
}

div.builder-overview-wrapper .row {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	gap: var(--space-4);
	margin-left: 130px;
	min-height: 30px;
}

div.builder-overview-wrapper .row::before {
	content: attr(data-title);
	position: absolute;
	left: -130px;
	top: var(--space-1);
	/* headline-4 */
	font-size: var(--font-size-headline-4);
	font-weight: var(--font-weight-headline-4);
	line-height: var(--line-height-headline-4);
	letter-spacing: var(--letter-spacing-headline-4);
	color: var(--color-on-layer-primary);
}

div.builder-overview-wrapper .row > div {
	display: flex;
}

div.builder-overview-wrapper .row[data-inverse='true']::before {
	color: var(--color-on-layer-inverse);
}

div.builder-overview-wrapper .row [data-inverse='true'] {
	position: relative;
}

div.builder-overview-wrapper .row[data-inverse='true']::after,
div.builder-overview-wrapper .row div[data-inverse='true']::before {
	content: '';
	position: absolute;
	display: flex;
	inset: -6px;
	background-color: #333;
	border-radius: var(--border-radius-medium);
	border: 6px solid #333;
	height: 100%;
	width: 100%;
}

div.builder-overview-wrapper .row[data-inverse='true']::after {
	z-index: -1;
	left: -136px;
	width: calc(100% + 130px);
}

/* Local components styles */

div.local-component-placeholder {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px dashed var(--color-border-danger);
	border-radius: var(--border-radius-medium);
	box-sizing: border-box;
	padding: var(--space-2) var(--space-4);
	height: 36px;
	font-size: 13px;
	line-height: 18px;
	font-family: var(--font-family);
	font-weight: 700;
	color: var(--color-on-layer-primary);
	background: var(--color-layer-danger);
}

/* DS style fixes */

div.sbdocs.sbdocs-wrapper {
	[role='status'] {
		margin-top: 16px;
	}

	[data-banner='text'] {
		a {
			line-height: inherit;
		}
	}
}

/* Aggregated changelog styles */

a.toc-link.node-name--H1[href='#aggregated-changelog'] {
	white-space: nowrap;
}

span.ds-change-type {
	position: relative;
	top: -1px;
	display: inline-block;
	border-radius: var(--border-radius-medium);
	margin-right: var(--space-1);
	height: 18px;
	width: 18px;
	line-height: 18px;
	text-align: center;
	color: var(--color-black-100);
	font-family: var(--font-family);
	font-size: var(--font-size-body-small);
	font-weight: var(--font-weight-bold);

	&.internal {
		background-color: var(--color-blue-70);
	}

	&.major {
		background-color: var(--color-yellow-50);
	}

	&.minor {
		background-color: var(--color-gray-30);
	}

	&.patch {
		background-color: var(--color-gray-90);
	}
}

span.ds-sb-table-changelog-style + table {
	width: 100%;
	font-size: var(--font-size-body-medium);

	tbody {
		td:first-of-type {
			width: 190px;

			small {
				color: var(--color-gray-90);

				span {
					color: var(--color-gray-60);
					font-size: inherit;
				}
			}
		}

		td:nth-of-type(2) {
			width: 50px;
			font-size: var(--font-size-body-small);
			text-align: center;
			color: var(--color-gray-60);
		}

		td:nth-of-type(3) {
			.ds-change-bump {
				color: var(--color-gray-90);
				font-size: inherit;
			}

			code {
				font-size: 90%;
			}
		}
	}
}