@use "@db-ux/core-foundations/build/styles/variables";
@use "@db-ux/core-foundations/build/styles/colors";
@use "@db-ux/core-foundations/build/styles/screen-sizes";
@use "@db-ux/core-foundations/build/styles/density";
@use "@db-ux/core-components/build/components/section/section";
@use "@db-ux/core-foundations/build/styles/helpers/display";

@forward "@db-ux/core-components/build/styles/webpack";
@forward "@db-ux/db-theme/build/styles/webpack";

:root:not(:has(.db-page)) {
	color-scheme: light;
}

body:not(:has(.db-page)) {
	padding-block-end: variables.$db-spacing-fixed-lg;
}

.db-main {
	scroll-behavior: smooth;
}

#__next {
	block-size: inherit;
}

#__next > div {
	block-size: inherit;
}

db-mainnavigation {
	margin: auto;
}

github-version-switcher {
	margin: auto 16px;
}

iframe {
	inline-size: 100%;
	block-size: calc(100% - 8px) !important;
}

.example-list {
	dd {
		margin-block-end: variables.$db-spacing-fixed-md;
		max-inline-size: 500px;
	}
}

.code-pre-wrap {
	white-space: pre-wrap;
}

.iframe-component-container {
	@include display.display(flex);
	flex-direction: column;

	.flex {
		@include display.display(flex);
		gap: variables.$db-spacing-fixed-sm;

		&[data-variant="column"] {
			flex-direction: column;
		}
	}
}

.base-64-container {
	@include display.display(grid);
	padding: variables.$db-spacing-fixed-md;
	gap: variables.$db-spacing-fixed-md;

	span {
		word-break: break-all;
	}
}

.noh1 {
	h1 {
		@include display.display(none);
	}
}

.is-properties {
	block-size: 100%;
	overflow: auto;

	h1,
	h2 {
		@include display.display(none);
	}
}

/* TODO: Use real table css in future */
table {
	@extend %db-density-functional;

	inline-size: 100%;
	border-collapse: collapse;
}

table td,
table th {
	border: 1px solid colors.$db-adaptive-on-bg-basic-emphasis-60-default;
	padding: variables.$db-spacing-fixed-md;
	max-inline-size: 33vw;
}

table tr:nth-child(even) {
	@extend %db-neutral-bg-basic-transparent-semi;
}

table th {
	@extend %db-neutral-bg-basic-transparent-semi;

	padding-inline: variables.$db-spacing-fixed-md;
}

.version-switcher {
	max-inline-size: variables.$db-sizing-3xl;
}

/* Workaround for current db-page from db-ux-elements */
div[class^="ch-"] {
	div,
	span {
		@extend %db-overwrite-font-size-sm;

		color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
	}
}

// Code Hike (https://github.com/code-hike/codehike) styles
.ch-frame-buttons {
	display: none !important;
}

.db-section[data-size="none"] {
	padding-block-end: variables.$db-spacing-fixed-xl;
}

%grid-container {
	--columns: 1;

	@include display.display(grid);
	grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
	gap: variables.$db-spacing-fixed-md;

	@include screen-sizes.screen() {
		--columns: 3;
	}
}

// icons overview

.icons-filter-container {
	@extend %grid-container;
}

.icons-overview-container {
	@extend %grid-container;

	--columns: 2;

	@include screen-sizes.screen() {
		--columns: 7;
	}

	padding: variables.$db-spacing-fixed-md;

	> .db-card {
		justify-content: center;
		align-items: center;

		.db-infotext {
			word-break: break-word;
		}
	}
}

// colors overview
.color-overview-container {
	@extend %grid-container;

	position: relative;
	padding: variables.$db-spacing-fixed-md 0;

	@include screen-sizes.screen() {
		--columns: 2;
	}

	@include screen-sizes.screen("md") {
		--columns: 3;
	}

	> span {
		position: absolute;
		block-size: 100%;
		inline-size: 100%;
	}

	&[data-mode="dark"] > span {
		filter: invert(1) brightness(1.2);
	}

	> div {
		position: relative;
		@include display.display(flex);
		justify-content: center;
		align-items: center;
		border: 1px solid colors.$db-adaptive-on-bg-basic-emphasis-60-default;
		padding: variables.$db-spacing-fixed-md;
	}

	button {
		position: absolute;
		inset-inline-end: var(--db-spacing-fixed-md);
		inset-block-start: 50%;
		transform: translateY(-50%);
	}
}

.color-overview-switches {
	@include display.display(flex);
	gap: variables.$db-spacing-fixed-lg;
	margin-block-end: variables.$db-spacing-fixed-md;
}

// density examples

.density-example-grid {
	@include display.display(grid);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: variables.$db-spacing-fixed-md;

	.db-card {
		gap: variables.$db-spacing-fixed-sm;
	}
}

.density-example-page {
	@include display.display(flex);
	flex-direction: column;
	gap: variables.$db-spacing-fixed-md;

	.density-example-page-regular {
		@include display.display(grid);
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: variables.$db-spacing-fixed-md;
	}

	.density-example-page-functional {
		@include display.display(grid);
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: variables.$db-spacing-fixed-md;
	}
}

// variables examples
.example-container {
	@extend %grid-container;

	p {
		margin: 0;
	}

	%spacing {
		background-color: colors.$db-successful-bg-inverted-contrast-high-default;
		color: colors.$db-successful-on-bg-inverted-default;
		border-color: colors.$db-successful-bg-inverted-contrast-high-default;
		block-size: 100%;
		@include display.display(flex);
		justify-content: center;
		position: absolute;
		align-items: center;
	}

	.example-item {
		@include display.display(flex);
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: variables.$db-spacing-fixed-md;

		.example-spacing-fixed,
		.example-spacing-responsive {
			border: 1px solid black;

			> div {
				@include display.display(flex);
				border: 1px solid
					colors.$db-adaptive-on-bg-basic-emphasis-60-default;
				position: relative;
			}
		}

		.example-spacing-fixed {
			> div {
				gap: variables.$db-spacing-fixed-xl;
			}

			.gap1,
			.gap2 {
				@extend %spacing;

				inline-size: variables.$db-spacing-fixed-xl;
			}

			$icon-width: var(--db-icon-font-size);

			.gap1 {
				inset-inline-start: $icon-width;
			}

			.gap2 {
				inset-inline-end: $icon-width;
			}
		}

		.example-spacing-responsive {
			> div {
				margin-inline: variables.$db-spacing-responsive-sm;
			}

			.margin1,
			.margin2 {
				@extend %spacing;

				inline-size: variables.$db-spacing-responsive-sm;
			}

			.margin1 {
				inset-inline-start: calc(
					-1 * #{variables.$db-spacing-responsive-sm}
				);
			}

			.margin2 {
				inset-inline-end: calc(
					-1 * #{variables.$db-spacing-responsive-sm}
				);
			}
		}

		.example-sizing {
			> div {
				@include display.display(flex);
				gap: variables.$db-spacing-fixed-md;
			}

			.sizing {
				@extend %spacing;

				background-color: colors.$db-warning-bg-inverted-contrast-high-default;
				color: colors.$db-warning-on-bg-inverted-default;
				border-color: colors.$db-warning-bg-inverted-contrast-high-default;
				position: unset;
				block-size: variables.$db-sizing-md;
				inline-size: variables.$db-sizing-md;
			}
		}
	}
}

.color-modes-container {
	padding: variables.$db-spacing-fixed-md;
	border: 1px dashed colors.$db-adaptive-on-bg-basic-emphasis-100-default;
	@include display.display(grid);
	gap: variables.$db-spacing-fixed-md;
	grid-template-columns: repeat(2, minmax(0, 1fr));

	.db-button {
		grid-column: span 2 / span 2;
	}

	.db-tag {
		margin-inline-start: auto;
	}

	section {
		padding: variables.$db-spacing-fixed-md;
	}

	.color-cards {
		grid-column: span 2 / span 2;
		@include display.display(grid);
		gap: variables.$db-spacing-fixed-md;
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

h1 {
	margin-block-start: variables.$db-spacing-fixed-sm;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	a:is(.header-link) {
		@include display.display(inline-block);
		margin-block: auto;
		margin-inline-start: variables.$db-spacing-fixed-xs;
		visibility: hidden;
		text-decoration: none;
		font-size: 0;
	}

	&:hover,
	&:focus {
		a:is(.header-link) {
			visibility: visible;
		}
	}
}

.db-code-docs {
	min-block-size: max(#{variables.$db-sizing-3xl}, 50vh);
	align-items: center;
	justify-content: center;
	padding: variables.$db-spacing-fixed-xl;
	margin-block-end: calc(
		#{variables.$db-spacing-fixed-xl} + #{variables.$db-sizing-sm}
	);
	position: relative;

	.code-details {
		@include display.display(flex);

		&[open] {
			inset-inline-start: 0;
			inset-block-start: 0;
		}

		.code-button {
			position: absolute;
			inset-block-end: calc(
				-1 *
					(
						#{variables.$db-spacing-fixed-sm} +
							#{variables.$db-sizing-sm}
					)
			);
			inset-inline-end: variables.$db-spacing-fixed-sm;
			z-index: 1;
			cursor: pointer;

			&::-webkit-details-marker {
				display: none;
			}
		}

		.no-code {
			margin: auto;
		}

		.backdrop {
			border-radius: variables.$db-border-radius-sm;
			background-color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
			opacity: 0.64;
			position: absolute;
			inset: 0;
		}

		.code {
			overflow: auto;
			position: absolute;
			z-index: 20;
			inset: 0;
			margin: variables.$db-spacing-fixed-md;
			@include display.display(flex);
			flex-direction: column;
			gap: variables.$db-spacing-fixed-sm;

			code {
				@include display.display(block);
				white-space: pre-wrap;
			}

			.tab-container {
				position: relative;

				.copy-button {
					position: absolute;
					z-index: 20;
					inset-inline-end: variables.$db-spacing-fixed-sm;
					inset-block-end: variables.$db-spacing-fixed-sm;

					@include screen-sizes.screen("md") {
						inset-block: variables.$db-spacing-fixed-sm auto;
					}
				}
			}
		}
	}
}

.validity-container {
	@include display.display(grid);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: variables.$db-spacing-fixed-sm;

	form {
		@include display.display(flex);
		flex-direction: column;
		gap: variables.$db-spacing-fixed-sm;
	}
}

.link-containers {
	@include display.display(grid);
	grid-template-areas:
		"previous previous"
		"next next";
	gap: variables.$db-spacing-fixed-md;
	justify-content: space-between;

	@include screen-sizes.screen("md") {
		grid-template-areas: "previous next";
	}

	a {
		text-decoration: none;
	}

	.previous-link-container,
	.next-link-container {
		flex-direction: row;
		min-inline-size: variables.$db-sizing-3xl;

		small {
			color: colors.$db-informational-bg-inverted-contrast-high-default;
			overflow-wrap: anywhere;
		}
	}

	.previous-link-container {
		grid-area: previous;
	}

	.next-link-container {
		grid-area: next;

		span,
		small {
			margin-inline-start: auto;
		}
	}
}

.breadcrumb-container {
	@include display.display(flex);
	overflow-x: auto;
	overflow-inline: auto;
	align-content: center;
	align-items: center;
	padding-block: variables.$db-spacing-fixed-sm;

	a {
		font-weight: normal;

		&:first-of-type {
			margin-inline-end: variables.$db-spacing-fixed-xs;
		}

		&:last-of-type {
			font-weight: bold;
		}
	}
}

.card-navigation {
	@include display.display(grid);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: variables.$db-spacing-fixed-md;

	@include screen-sizes.screen("md") {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	a {
		text-decoration: none;
	}

	.db-card {
		@include display.display(grid);
		grid-template-areas: "index icon" "label icon";

		small {
			grid-area: index;
		}

		p {
			grid-area: label;
			margin: 0;
		}

		.db-icon {
			grid-area: icon;
			margin-block: auto;
			margin-inline-start: auto;
		}
	}
}

.db-section {
	/* section workaround:
	We show the sections inside a card which is wrapped with a section.
	This leads to issues because in general you should use the section on your root layout
	*/

	.db-section {
		&[data-width="small"] {
			padding-inline: calc(
				#{section.$small-section-padding-inline} -
					#{section.$large-section-padding-inline}
			);
		}

		&[data-width="medium"] {
			padding-inline: calc(
				#{section.$medium-section-padding-inline} -
					#{section.$large-section-padding-inline}
			);
		}

		&[data-width="large"] {
			padding-inline: calc(
				#{variables.$db-spacing-fixed-sm} +
					#{variables.$db-spacing-fixed-md}
			);
		}
	}
}

.db-switch {
	> .db-tooltip {
		min-inline-size: variables.$db-sizing-2xl;
	}
}
