<div class="flex flex-row items-center rounded p-4 text-white border border-solid" [class]="toastClass">
  @if (toast.title) {
    <div class="font-bold mr-4 shrink-0">
      {{ toast.title }}
    </div>
  }
  <div class="grow">
    {{ toast.message }}
  </div>
  @if (closeable) {
    <div class="text-right grow-0">
      <button (click)="closeToast()">
        <shared-icon icon="close"></shared-icon>
      </button>
    </div>
  }
</div>
