{% set top = top is defined ? top : '164px' %}

{% if previous is not empty %}
<a href="{{previous.link}}" title="Articolo precedente" style="top: {{top}}" class="group bg-white absolute z-10 hidden xl:flex justify-center items-center shadow-2xl rounded-lg  transition-all -left-4">

    <div class="bg-primary h-24 w-12 flex items-center justify-center -ml-2">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="white" class="size-6 -ml-2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
        </svg>
    </div>

    <div class="hidden group-hover:block flex-col items-center justify-center h-24 w-80 rounded-r-lg">
        <div class="flex flex-col h-24 justify-center p-4">
            <span class="text-primary font-semibold text-xs uppercase">{{previous.label}}</span>
            <div class="line-clamp-2 text-md leading-5">
                {{previous.title}}
            </div>
        </div>
    </div>
</a>
{% endif %}

{% if next is not empty %}
<a href="{{next.link}}" title="Articolo successivo" style="top: {{top}}" class="group bg-white absolute z-10 hidden xl:flex justify-center items-center rounded-lg shadow-2xl  transition-all -right-4">

    <div class="hidden group-hover:block h-24 w-80 rounded-l-lg">
        <div class="flex flex-col h-24 justify-center p-4">
            <span class="text-primary font-semibold text-xs uppercase">{{next.label}}</span>
            <div class="line-clamp-2 text-md leading-5">
                {{next.title}}
            </div>
        </div>
    </div>

    <div class="bg-primary h-24 w-12 flex items-center justify-center -mr-2">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="white" class="size-6 -mr-2">
            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
        </svg>
    </div>
</a>
{% endif %}
