@props(['icon', 'href' => '#', 'active' => false])
<a href="{{ $href }}"
   @class([
       'group flex min-h-11 items-center gap-3 rounded-md border px-3 py-2 text-sm transition-colors',
       'border-accent/25 bg-accent/10 text-ink shadow-[inset_2px_0_0_var(--color-accent)]' => $active,
       'border-transparent text-ink-2 hover:bg-raised hover:text-ink' => ! $active,
   ])
   @if ($active) aria-current="page" @endif>
    <x-icon :name="$icon" @class(['h-[18px] w-[18px] shrink-0', 'text-accent' => $active]) />
    <span class="truncate">{{ $slot }}</span>
</a>