@if (($variant ?? 'top') === 'top')
    <div class="single-page-toolbar reveal">
        <a class="single-page-back-btn" href="{{ $backHref }}">
            <span class="single-page-back-btn-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>
            </span>
            <span class="single-page-back-btn-label">{{ $backLabel }}</span>
        </a>
    </div>
@elseif (! empty($next))
    <footer class="single-page-pagination reveal" aria-label="Page navigation">
        <div class="single-page-pagination-head">
            <span class="single-page-pagination-label">Continue exploring</span>
            <a class="single-page-pagination-back" href="{{ $backHref }}">{{ $backLabel }}</a>
        </div>

        <a class="single-page-next-tile" href="{{ $nextHref }}">
            <span class="single-page-next-tile-icon" aria-hidden="true">
                <x-icon :name="$nextIcon" />
            </span>
            <span class="single-page-next-tile-copy">
                <span class="single-page-next-tile-kicker">Up next</span>
                <span class="single-page-next-tile-title">{{ $nextLabel }}</span>
                @if (! empty($nextSummary))
                    <span class="single-page-next-tile-summary">{{ $nextSummary }}</span>
                @endif
            </span>
            <span class="single-page-next-tile-action">
                Explore
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>
            </span>
        </a>
    </footer>
@endif