@import "../assets/css/_base/@media.css";

@layer components {
	@media (--motion) {
		.docs-nav-group {
			view-transition-name: nav;
			height: 100%;
			width: fit-content;
			scale: 1;
		}
	}

	::view-transition-old(nav),
	::view-transition-new(nav) {
		height: 100%;
	}

	::view-transition-group(nav) {
		animation-duration: 0.4s;
		scale: 1;
		animation-timing-function: cubic-bezier(0.23, 1.22, 0.64, 1);
	}

	.hero {
		position: relative;
		margin-block: var(--space-xxl);
		font-size: clamp(3.6em, 8vw, 7em);
		line-height: 1;
		font-weight: var(--font-weight-xs);
		color: var(--color-accent);
		z-index: var(--z-2);
	}

	@media (--md) {
		.docs-layout {
			display: grid;
			grid-template-columns: 1fr auto;
			grid-auto-flow: dense;
			align-items: start;
			gap: var(--space-lg);
			position: relative;
			z-index: var(--z-2);

			& > article > :first-child {
				margin-block-start: 0;
			}

			& > nav {
				grid-column: 2;
				padding-inline-start: var(--space-lg);
				border-inline-start: var(--border-width-sm) solid var(--color-border);
			}
		}
	}

	.grease-marks {
		inline-size: 100%;
		pointer-events: none;
		position: absolute;
		inset-inline-start: -80rem;
		z-index: -1;
		opacity: 1;
		rotate: -8deg;
		display: none;

		.js & {
			display: block;
		}

		& > * {
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 0;
			inline-size: 300rem;
			block-size: 300rem;
			border-width: 0;
			border-block-start-width: 10rem;
			border-style: solid;
			border-color: light-dark(
				oklch(from var(--color-accent) var(--100)),
				oklch(from var(--color-accent) var(--700) / 15%)
			);
			border-radius: 100%;
			mix-blend-mode: soft-light;

			.high-contrast & {
				display: none;
			}
		}
	}

	.demo-grid {
		& > div {
			padding: var(--space-sm);
			color: var(--color-text);
			background-color: var(--color-bg-dark);
			font-size: var(--font-size-sm);
		}
	}

	.demo-chips {
		display: flex;
		flex-wrap: wrap;
		margin-block: 0 var(--space-xs);
		list-style: none;

		& > li {
			inline-size: auto;
			flex-grow: 1;
			margin: 0;
			padding-block: var(--space-md);
			padding-inline: var(--space-sm);
			color: var(--color-text);
			background-color: var(--color-bg);
			font-size: var(--font-size-xs);
			text-align: center;

			& > span {
				color: var(--color-text);
			}
		}
	}
}
