@if (visible()) {
  <div
    class="relative flex min-h-10 items-center gap-2 overflow-hidden px-3 py-2 text-xs"
    [class]="classes()"
    (click)="onClick()"
  >
    @if (leftIcon()) {
      <i class="shrink-0 text-sm" [class]="leftIcon()" aria-hidden="true"></i>
    }
    @if (scrollable() && !wrap()) {
      <div class="marquee relative flex-1 overflow-hidden">
        <div class="marquee-track flex w-max" [style.animation-duration]="marqueeDuration()">
          <span class="shrink-0 whitespace-nowrap pr-10">{{ text() }}</span>
          <span class="shrink-0 whitespace-nowrap pr-10" aria-hidden="true">{{ text() }}</span>
        </div>
      </div>
    } @else {
      <p class="flex-1" [class.truncate]="!wrap()" [class.whitespace-normal]="wrap()">
        {{ text() }}
      </p>
    }
    @if (mode() === 'link') {
      <i class="fa-solid fa-chevron-right shrink-0 text-xs opacity-70" aria-hidden="true"></i>
    } @else if (mode() === 'closeable') {
      <button
        type="button"
        class="-my-1 -mr-1 inline-flex h-10 w-10 shrink-0 items-center justify-center rounded transition-opacity hover:opacity-70"
        (click)="onClose($event)"
        aria-label="关闭通知"
      >
        <i class="fa-solid fa-xmark text-xs" aria-hidden="true"></i>
      </button>
    }
  </div>
}