---
interface Heading {
    depth: number;
    slug: string;
    text: string;
}

interface Props {
    headings: Heading[];
}

const {headings} = Astro.props;
---

{headings.length > 0 && (
    <nav aria-label="Page sections" class="not-prose">
        <span class="text-tertiary pe-1">Jump to:</span>
        {headings.map(heading => (
            <a href={`#${heading.slug}`}>{heading.text}</a>
        ))}
    </nav>
)}

<style>
    nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        row-gap: 0.375rem;
        margin-bottom: 2rem;
        font-size: 0.875rem;

        @media (min-width: 640px) {
            margin-bottom: 2.5rem;
            font-size: 0.925rem;
        }
    }

    a::before {
        content: '›';
        /* Inline-block keeps the hover underline off the marker. */
        display: inline-block;
        margin-inline-end: 0.5rem;
        color: light-dark(var(--color-neutral-300), var(--color-neutral-700));

        @media (min-width: 640px) {
            margin-inline-end: 0.75rem;
        }
    }

    a {
        /* Tap-target padding for touch. */
        padding: 0.25rem 0.375rem 0.25rem 0.75rem;
        letter-spacing: 0.5px;
        color: light-dark(var(--color-neutral-650), var(--color-neutral-350));
        font-weight: 500;
        text-decoration-line: none;
        /* Match the site-wide underline formula from input.css. */
        text-decoration-thickness: 0.125em;
        text-underline-offset: 0.35em;

        @media (hover: hover) {
            &:hover {
                color: light-dark(var(--color-black), var(--color-white));
                text-decoration-line: underline;
            }
        }

        &:is(:focus-visible, :active) {
            color: light-dark(var(--color-black), var(--color-white));
            text-decoration-line: underline;
        }
    }
</style>
