.docs-page {
	container-type: inline-size;
	container-name: docs-page;

	display: flex;
	flex-direction: column;

	width: var(--page-width);
	max-width: calc(100% - 2rem);
	margin: 0 auto;

	border-radius: var(--radius-md);

	.row {
		display: flex;
		align-items: center;
	}

	.col {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	section.section {
		box-sizing: border-box;
		gap: 1rem;

		width: 100%;
		padding: 0.5rem 2rem 1rem;

		.card {
			padding: 0 var(--padding-lg);
			background: var(--primary);
			border-radius: var(--radius);
		}
	}

	.gooey {
		color: var(--theme-a);
		font-family: var(--font-a);
		font-variation-settings: 'wght' 500;
	}

	span .gooey {
		position: relative;
		display: inline-block;
		transform: translateY(-0.1rem) rotate(-1deg) skew(-1deg) scale(1.1);
		padding-right: 0.1rem;
	}

	.example {
		border: 1px solid var(--bg-b);

		display: flex;
		align-items: center;
		border-radius: var(--radius-md);

		min-height: 0;
		margin-top: 0.5rem;

		.code-window {
			--code-height: 100%;
			--font-size: var(--font-sm);
			--line-height: 1.5rem;

			border-top-right-radius: 0;
			border-bottom-right-radius: 0;

			&:has(pre:focus-visible) {
				outline: var(--focus-outline-color);
				outline-offset: -1px;
			}
		}

		.code-window code {
			border-radius: 0;
			font-family: var(--font-code);
			font-variation-settings: 'wght' 300;
		}
	}

	.example.inline {
		display: flex;
		justify-content: flex-start;
		border: none;
		gap: 2rem;
		height: fit-content;

		.code-window {
			display: flex;
			flex-shrink: 1;
			border-radius: var(--radius-md);

			.copy {
				opacity: 0;
				transition: opacity 0.2s ease-in-out;
			}

			&:hover .copy {
				opacity: 1;
			}

			// scollbars
			*::-webkit-scrollbar,
			*::-webkit-scrollbar-track,
			*::-webkit-scrollbar-thumb,
			&::-webkit-scrollbar,
			&::-webkit-scrollbar-track,
			&::-webkit-scrollbar-thumb {
				display: none;
			}
		}

		.description {
			flex: 1fr;
			width: 23rem;
			max-width: 100%;
		}
	}

	.description {
		width: 100%;
		width: fit-content;

		font-size: var(--font);

		line-height: 1.5;

		code {
			// code {
			padding: 0.1rem 0.5rem;
			background: color-mix(in hsl, var(--dark-b), var(--dark-c) 42%);
			color: var(--fg-a);
			color: var(--fg-b);
			color: color-mix(in hsl, var(--fg-b), var(--theme-a) 10%);
			color: #f8d2c9;

			contain: content;
			height: fit-content;
			font-variation-settings:
				'wght' 600,
				'wdth' 100;
		}

		em {
			font-style: italic;
			color: var(--fg-d);

			code {
				font-style: italic;
				font-synthesis: style;
				background: color-mix(in hsl, var(--dark-c), var(--dark-d) 42%);

				border-top-left-radius: 1rem;
				border-top-right-radius: 2px;
				border-bottom-left-radius: 2px;
				border-bottom-right-radius: 1rem;
			}
		}

		mono {
			font-family: var(--font-mono);
		}

		strong {
			font-variation-settings:
				'wght' 700,
				'wdth' 100;
		}
	}

	// .example > .description {
	// 	padding-left: var(--padding-lg);
	// }

	.description a {
		color: var(--fg-b);
		text-decoration: underline;
		text-underline-offset: 0.15rem;
		text-decoration-thickness: 0.5px;
		text-decoration-color: var(--fg-d);

		&:hover {
			color: var(--fg-a);
			text-decoration-color: var(--theme-a);
		}
	}

	.description.em {
		font-size: var(--font-xs);
		font-style: italic;
		font-variation-settings: 'wght' 350;
	}

	.info-wrapper .description.em {
		z-index: 99;

		&:not(.plain)::before {
			display: inline-block;
			// content: '~';
			content: ' ';
			transform: translateX(1rem);
			width: 2rem;

			text-align: center;
			font-size: 1rem;
			font-style: normal;

			color: var(--fg-d);
		}
	}

	h2,
	h3 {
		scroll-behavior: smooth;
		scroll-padding-top: 1rem;
	}

	h2 {
		position: relative;
		width: fit-content;

		font-variation-settings:
			'wght' 300,
			// 'wght' 400,
			'wdth' 108;
		letter-spacing: 0.1rem;
		font-size: var(--font-xl);
	}

	// h2::before {
	// 	content: '';
	// 	display: inline-block;

	// 	position: absolute;
	// 	inset: 0;

	// 	width: fit-content;
	// 	min-width: 100%;
	// 	min-height: 100%;

	// 	background: var(--bg-a);
	// 	border-top-left-radius: 0;
	// 	border-bottom-left-radius: 0;
	// 	border-radius: var(--radius);

	// 	z-index: -1;

	// 	// transform: translateX(-1.5rem) scale(2, 1.75);

	// 	transform: translateX(-10rem) scale(2, 1.75);
	// 	opacity: 0;

	// 	transition:
	// 		opacity 0.2s ease-in-out,
	// 		transform 0.2s ease-in-out;
	// }

	// h2::after {
	// 	// content: '';
	// 	display: inline-block;
	// 	width: 0;
	// 	height: 0;
	// 	position: absolute;
	// 	inset: 0;
	// 	// background: var(--bg-a);
	// 	border: 50px solid transparent;
	// 	border-left: 50px solid transparent;
	// 	border-bottom: 50px solid transparent;
	// 	border-top: 30px solid var(--bg-a);
	// 	z-index: -2;
	// 	// transform: translate(100%, 10%) scale(12, 1.5);
	// 	transform: translate(-1rem, 0rem) scale(2, 0.4) skewX(-31deg);
	// 	border-radius: 2rem;
	// }

	h3 {
		color: var(--fg-b);
		font-size: var(--font-lg);
		font-variation-settings:
			'wght' 400,
			'wdth' 100;
		text-align: center;
		font-family: var(--font-mono);
	}

	//- trying this out
	h2 {
		text-align: center;
		// margin-left: auto;
		// margin-right: auto;
	}
	h3 {
		text-align: left;
		transform: translateX(var(--padding-lg));
	}
}

@media screen and (width < 1000px) {
	.docs-page {
		width: 100%;
		max-width: 100%;

		// h2::before {
		// 	transform: translateX(-1.5rem) scale(2, 1.75);
		// 	opacity: 1;
		// }

		section.section {
			padding: 1rem 0;
			margin: 0;
			max-width: calc(100% - 1rem);
		}

		.example {
			display: block;

			.code-window {
				height: fit-content;
				width: 100%;
				max-width: 100%;

				color: var(--theme-b, red) !important;

				border-radius: var(--radius-md);
				border-bottom-right-radius: 0;

				overflow: hidden;

				pre {
					--line-height: 1.25;
					--font-size: var(--font-xxs);
				}
			}
		}

		.description {
			font-size: var(--font-xxs);
		}
	}
}

:root[theme='light'] .docs-page .code-window code {
	font-variation-settings: 'wght' 400;
}

.sidebar-background {
	view-transition-name: sidebar-background;

	position: relative;
	left: 0;
	top: 0;

	min-height: 100%;
	width: 13rem;

	z-index: 1;

	transform: translateX(-100%);
	transition: transform 0.3s cubic-bezier(0, 0.82, 0, 1.08);
	animation: slide 0.3s cubic-bezier(0, 0.82, 0, 1.08) forwards;

	&::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 0.2rem;
		height: 100%;
		background: inherit;
		z-index: 2;
	}
}

@keyframes slide {
	to {
		transform: translateX(0);
	}
}
