@props(['active'])

@php
    $classes = ($active ?? false)
                ? 'py-1 px-3 bg-zinc-700/75 text-white hover:bg-zinc-700 group pixel-corner-sm active:bg-zinc-900'
                : 'py-1 px-3 bg-zinc-800 text-white hover:bg-zinc-700 group pixel-corner-sm active:bg-zinc-900'
@endphp

<button class=" filter drop-shadow-pixel-sm hover:drop-shadow-pixel-sm-hover shadow-black">

    <div class="{{$classes}}">

        <div class="flex flex-row">
            <div class="text-neutral-200 mr-1 text-shadow-sm shadow-zinc-950">
                <
            </div>
            <div {{$attributes->merge(['class' => 'group-hover:underline text-shadow-sm'])}}>
                {{ $slot }}
            </div>
            <div class="text-neutral-200 ml-1 text-shadow-sm shadow-zinc-950">
                >
            </div>
        </div>
    </div>
</button>