{{--
    Icono de notificacion reutilizable del header (usar via @component).
    Centraliza el <a>, el badge, el tooltip y la accesibilidad (aria-label en el
    link + aria-hidden en el glifo, que faltaban en varios iconos -- ver
    investigacion de diseño). El glifo SVG llega por el slot.

    Params:
      $href    (string)  destino del link
      $title   (string)  tooltip + aria-label
      $count   (int|null) contador del badge; sin badge si es 0/null
      $variant (string)  color del badge: danger (urgente) | info | warning. Default danger.
--}}
<span class="separator"></span>
<ul class="notifications">
    <li>
        <a href="{{ $href }}" class="notification-icon text-secondary"
            data-toggle="tooltip" data-placement="bottom" title="{{ $title }}" aria-label="{{ $title }}">
            <span aria-hidden="true">{{ $slot }}</span>
            @if(($count ?? 0) > 0)
            <span class="badge badge-pill badge-{{ $variant ?? 'danger' }} badge-up cart-item-count">{{ $count }}</span>
            @endif
        </a>
    </li>
</ul>