@props(['x-text' => null, 'href' => null, 'ondark' => false])
@php
    $tag = !empty($href) ? 'a' : 'button';
@endphp
<{{ $tag }}
    {{ $attributes->merge(['href' => $href])->class([
            'group relative overflow-clip inline-flex px-8 py-4 font-bold text-sm rounded-full items-center sm:text-base',
            'shadow-main hover:shadow-none transition-all' => !$ondark,
        ]) }}>
    <span
        class="absolute inset-[-4px] bg-brand-yellow {{ $ondark ? 'contraste-light' : 'contraste-dark' }} transition-opacity duration-100 group-hover:opacity-0 group-hover:delay-300"></span>
    <span class="relative overflow-clip">
        <span @if (!empty($xText)) x-text="{{ $xText }}" @endif
            class="h-full w-full flex gap-2 items-center text-brand-brown  {{ $ondark ? 'contraste-light' : 'contraste-dark' }} transition-transform duration-[400ms] group-hover:-translate-y-full">
            {{ $slot }}
        </span>
        <span @if (!empty($xText)) x-text="{{ $xText }}" @endif aria-hidden="true"
            class="absolute inset-0 z-[1] h-full w-full flex gap-2 items-center origin-bottom translate-y-full {{ $ondark ? 'text-brand-brown' : 'text-white' }} transition-transform duration-[400ms] group-hover:translate-y-0">
            {{ $slot }}
        </span>
    </span>
    <span
        class="absolute inset-[-4px] {{ $ondark ? 'bg-white contraste-light' : 'bg-brand-brown contraste-dark' }} transition-all duration-[400ms] [clip-path:inset(calc(100%_-_8px)_24px_8px_24px_round_88rem)] group-hover:[clip-path:inset(0px_0px_0px_0px_round_88rem)]"></span>
    </{{ $tag }}>