@props(['active'])

@php
$classes = ($active ?? false)
            ? 'inline-flex items-center rounded-full border border-[var(--dashboard-green-soft)] bg-[var(--dashboard-green-soft)] px-3 py-2 text-sm font-semibold leading-5 text-[var(--dashboard-green)] shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] focus:outline-none transition duration-150 ease-in-out'
            : 'inline-flex items-center rounded-full border border-transparent px-3 py-2 text-sm font-semibold leading-5 text-[var(--dashboard-muted)] hover:border-[var(--dashboard-line)] hover:bg-white/[0.04] hover:text-[var(--dashboard-text)] focus:outline-none transition duration-150 ease-in-out';
@endphp

<a {{ $attributes->merge(['class' => $classes]) }}>
    {{ $slot }}
</a>