---
const { prev, next } = Astro.props;
---

<nav class="not-prose" aria-label="Page navigation">
    {prev ? (
        <div class="card xl page-link shadow-2xs">
            <i class="icon-[mdi--chevron-left]" aria-hidden="true"></i>
            <div>
                {prev.breadcrumbs.length > 2 && (
                    <p class="crumbs">
                        {prev.breadcrumbs.slice(1, -1).map(b => b.label).join(' / ')}
                    </p>
                )}
                <h4 set:html={prev.frontmatter.title}></h4>
                <a href={prev.url} rel="prev">
                    <span class="sr-only">Previous: {prev.frontmatter.title}</span>
                </a>
                {prev.frontmatter.description &&
                    <p class="desc">{prev.frontmatter.description}</p>}
            </div>
        </div>
    ) : null}

    {next ? (
        <div class="card xl page-link shadow-2xs">
            <i class="icon-[mdi--chevron-right]" aria-hidden="true"></i>
            <div>
                {next.breadcrumbs.length > 2 && (
                    <p class="crumbs">
                        {next.breadcrumbs.slice(1, -1).map(b => b.label).join(' / ')}
                    </p>
                )}
                <h4 set:html={next.frontmatter.title}></h4>
                <a href={next.url} rel="next">
                    <span class="sr-only">Next: {next.frontmatter.title}</span>
                </a>
                {next.frontmatter.description &&
                    <p class="desc">{next.frontmatter.description}</p>}
            </div>
        </div>
    ) : null}
</nav>

<style>
    nav {
        margin-top: 4rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;

        @media (min-width: 640px) { gap: 1rem; }
    }

    .page-link {
        position: relative;
        isolation: isolate;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        transition: background 0.15s, border-color 0.15s;

        @media (min-width: 640px) { gap: 1rem; padding: 1rem; }

        &:has([rel="next"]) {
            flex-direction: row-reverse;
            grid-column: 2;
        }

        > i {
            font-size: 1.5rem;
            flex-shrink: 0;
            color: var(--color-neutral-400);
            transition: color 0.15s;

            @media (min-width: 640px) { font-size: 1.875rem; }
        }

        > div {
            flex: 1;
            min-width: 0;
        }

        .crumbs {
            font-size: 0.575rem;
            font-weight: 500;
            letter-spacing: 0.125em;
            text-transform: uppercase;
            color: light-dark(var(--color-neutral-500), var(--color-neutral-500));
            margin-bottom: 0.125rem;
            transition: color 0.15s;

            @media (min-width: 640px) { margin-bottom: 0.25rem; }
        }

        h4 {
            font-weight: 500;
            font-size: 0.875rem;
            color: light-dark(var(--color-neutral-700), var(--color-neutral-300));
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            transition: color 0.15s;

            @media (min-width: 640px) { font-size: 1rem; -webkit-line-clamp: 2; }
        }

        a {
            outline: none;

            &::before {
                content: '';
                position: absolute;
                inset: 0;
                z-index: 10;
            }
        }

        .desc {
            font-size: 0.75rem;
            color: light-dark(var(--color-neutral-600), var(--color-neutral-400));
            margin-top: 0.125rem;
            overflow: hidden;
            -webkit-box-orient: vertical;
            line-height: 1.625;
            transition: color 0.15s;

            @media (min-width: 640px) {
                font-size: 0.875rem;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                margin-top: 0.25rem;
            }
        }

        /* Interact states */
        @media (hover: hover) {
            &:hover {
                background: light-dark(var(--color-neutral-75), var(--color-neutral-875));
                border-color: light-dark(var(--color-neutral-400), var(--color-neutral-600));

                > i { color: light-dark(var(--color-neutral-600), var(--color-neutral-200)); }
                .crumbs { color: light-dark(var(--color-neutral-700), var(--color-neutral-300)); }
                h4 { color: light-dark(var(--color-neutral-900), white); }
                .desc { color: light-dark(var(--color-neutral-700), var(--color-neutral-200)); }
            }
        }

        &:has(:is(:focus-visible, :active)) {
            background: light-dark(var(--color-neutral-75), var(--color-neutral-875));
            border-color: light-dark(var(--color-neutral-400), var(--color-neutral-600));

            > i { color: light-dark(var(--color-neutral-600), var(--color-neutral-200)); }
            .crumbs { color: light-dark(var(--color-neutral-700), var(--color-neutral-300)); }
            h4 { color: light-dark(var(--color-neutral-900), white); }
            .desc { color: light-dark(var(--color-neutral-700), var(--color-neutral-200)); }
        }

        &:has(:focus-visible) {
            outline: 2px solid light-dark(var(--color-neutral-500), var(--color-neutral-400));
            outline-offset: 2px;
        }
    }
</style>
