@props(['active'])

@php
$classes = ($active ?? false)
            ? 'inline-flex items-center px-2.5 xl:px-3 py-1.5 rounded-md text-xs xl:text-sm font-semibold text-black transition duration-150 ease-in-out whitespace-nowrap'
            : 'inline-flex items-center px-2.5 xl:px-3 py-1.5 rounded-md text-xs xl:text-sm font-medium text-white/70 hover:text-white hover:bg-white/10 focus:outline-none transition duration-150 ease-in-out whitespace-nowrap';
$style    = ($active ?? false)
            ? 'background:#fca311;'
            : '';
@endphp

<a {{ $attributes->merge(['class' => $classes]) }}
   @if($style) style="{{ $style }}" @endif>
    {{ $slot }}
</a>