@if ($attributes->has('href'))
    <a {{ $attributes->merge(['class' => 'flex relative px-4 py-2 overflow-hidden font-medium text-lio-800 bg-lio-100 border border-lio-100 rounded-lg shadow-inner group']) }}>
        <span class="absolute top-0 left-0 w-0 h-0 transition-all duration-200 border-t-2 border-lio-600 group-hover:w-full ease"></span>
        <span class="absolute bottom-0 right-0 w-0 h-0 transition-all duration-200 border-b-2 border-lio-600 group-hover:w-full ease"></span>
        <span class="absolute top-0 left-0 w-full h-0 transition-all duration-300 delay-200 bg-lio-600 group-hover:h-full ease"></span>
        <span class="absolute bottom-0 left-0 w-full h-0 transition-all duration-300 delay-200 bg-lio-600 group-hover:h-full ease"></span>
        <span class="absolute inset-0 w-full h-full duration-300 delay-300 bg-lio-900 opacity-0 group-hover:opacity-100"></span>
        <span class="relative transition-colors duration-300 delay-200 group-hover:text-white ease flex">
            {{ $slot }}
            <x-heroicon-s-arrow-right class="w-4 h-4 fill-current ml-1 mt-1" />
        </span>
    </a>
@else
    <button {{ $attributes->merge(['class' => 'relative px-4 py-2 overflow-hidden font-medium text-lio-800 bg-lio-100 border border-lio-100 rounded-lg shadow-inner group']) }}>
        <span class="absolute top-0 left-0 w-0 h-0 transition-all duration-200 border-t-2 border-lio-600 group-hover:w-full ease"></span>
        <span class="absolute bottom-0 right-0 w-0 h-0 transition-all duration-200 border-b-2 border-lio-600 group-hover:w-full ease"></span>
        <span class="absolute top-0 left-0 w-full h-0 transition-all duration-300 delay-200 bg-lio-600 group-hover:h-full ease"></span>
        <span class="absolute bottom-0 left-0 w-full h-0 transition-all duration-300 delay-200 bg-lio-600 group-hover:h-full ease"></span>
        <span class="absolute inset-0 w-full h-full duration-300 delay-300 bg-lio-700 opacity-0 group-hover:opacity-100"></span>
        <span class="relative transition-colors duration-300 delay-200 group-hover:text-white ease flex items-center gap-x-2">
            {{ $slot }}
            <x-heroicon-s-arrow-right class="w-4 h-4 fill-current ml-1 mt-1" />
        </span>
    </button>
@endif