@props([
    'url' => null,
    'caption' => null,
    'pop' => false,
    'lil' => false,
    'danger' => false,
    'primary' => false,
    'secondary' => false,
])
@php
    $size = $lil ? 'px-1 py-0 rounded-sm shadow-sm text-sm' : 'px-3 py-1 rounded shadow text-regular';
    $color = 'bg-slate-100 hover:bg-white text-slate-400 hover:text-slate-900 dark:bg-slate-900 dark:hover:bg-black dark:text-slate-600 dark:hover:text-slate-100';
    
    if($danger) $color = 'bg-red-600 text-white enabled:hover:bg-red-500 enabled:active:bg-red-700 focus:ring-red-500';
    if($primary) $color = 'bg-blue-600 text-white enabled:hover:bg-gray-700 focus:bg-gray-700 enabled:active:bg-gray-900 focus:ring-indigo-500';
    if($secondary) $color = 'bg-slate-100 border-gray-300 text-gray-700 enabled:hover:bg-white focus:ring-indigo-500 border-2 border-slate-200 enabled:hover:border-slate-500';

@endphp
<span>
@isset($url)
    <a
        href='{{ $url }}'
    @if($pop)
        target='_blank'
    @endif
        class='text-sm underline inline-block'
    >
@endisset
        <button class='{{ $size }} {{ $color }} inline-block'>
            {{ $caption ?? $slot }}
        </button>
@isset($url)
    </a>
@endisset
</span>