/*
 * Section bar: the product page's in-page navigation (A7).
 *
 * 64 tall on the header's bottom rule, 13 / 500, links in white .64, the
 * current one white with a 2px bar on the top edge. It sticks to the top of
 * the viewport in the deep purple, with no price and no Buy link; a
 * back-to-top control sits at the right end. On mobile the links scroll
 * sideways under a fade.
 *
 *   <nav class="vdt-section-bar vdt-on-dark" aria-label="On this page">
 *     <div class="vdt-section-bar__inner vdt-container">
 *       <ul class="vdt-section-bar__list"><li><a class="vdt-section-bar__link" aria-current="true">Overview</a></li>…</ul>
 *       <a class="vdt-section-bar__top" href="#top"><span class="vh">Back to top</span><?= svg(…arrow-up.svg) ?></a>
 *     </div>
 *   </nav>
 *
 * It is the first thing in <main>, not inside the header, because the header
 * ground clips its overflow. aria-current and data-stuck are set by the script
 * in snippets/section-bar; the CSS only styles them.
 */

@layer vdt.components {
	.vdt-section-bar {
		position: sticky;
		top: 0;
		z-index: 3;
		background: var(--vdt-purple-deep);
		color: var(--vdt-on-dark-muted);
		font-size: var(--vdt-size-meta);
		font-weight: var(--vdt-weight-medium);
	}

	/*
	 * At rest, straight under the product header, it wears the header's last
	 * purple under a hairline, so it reads as the header's bottom line. The
	 * script in snippets/section-bar sets `data-stuck` once the bar has left
	 * its place, and it takes the deep purple above. The hairline is a shadow,
	 * not a border, so the bar keeps its height when it changes.
	 */
	.vdt-section-bar:not([data-stuck]) {
		background: var(--vdt-purple);
		box-shadow: inset 0 var(--vdt-rule-width) 0 var(--vdt-on-dark-hairline);
	}

	/* A row the bar links to stops below the bar, not under it. */
	.vdt-main:has(> .vdt-section-bar) > .vdt-section {
		scroll-margin-top: 4rem;
	}

	.vdt-section-bar__inner {
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		gap: var(--vdt-space-24);
		min-height: 4rem;
	}

	.vdt-section-bar__list {
		display: flex;
		gap: var(--vdt-space-32);
		list-style: none;
		margin: 0;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.vdt-section-bar__list::-webkit-scrollbar {
		display: none;
	}

	.vdt-section-bar__link {
		display: inline-flex;
		align-items: center;
		height: 100%;
		min-height: 4rem;
		border-top: var(--vdt-bar-width) solid transparent;
		color: inherit;
		text-decoration: none;
		white-space: nowrap;
		transition: color var(--vdt-duration) var(--vdt-easing);
	}

	.vdt-section-bar__link:hover {
		color: var(--vdt-on-dark-hover);
	}

	.vdt-section-bar__link[aria-current] {
		color: var(--vdt-white);
		border-top-color: var(--vdt-white);
	}

	.vdt-section-bar__top {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		align-self: center;
		width: 2.625rem;
		height: 2.625rem;
		color: var(--vdt-white);
		transition: color var(--vdt-duration) var(--vdt-easing);
	}

	.vdt-section-bar__top:hover {
		color: var(--vdt-on-dark-hover);
	}

	.vdt-section-bar__top svg {
		width: var(--vdt-glyph);
		height: var(--vdt-glyph);
	}

	@media (max-width: 60rem) {
		.vdt-section-bar__inner {
			position: relative;
		}

		/* The fade over the scrolling end of the list. */
		.vdt-section-bar__inner::after {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			right: calc(var(--vdt-gutter) + 2.625rem);
			width: 3rem;
			background: linear-gradient(90deg, transparent, var(--vdt-purple-deep));
			pointer-events: none;
		}

		.vdt-section-bar__list {
			gap: var(--vdt-space-24);
		}
	}
}