<script lang="ts">
  import { app } from '../lib/app.svelte';
</script>

<div class="toasts">
  {#each app.toasts as t (t.id)}
    <button class="toast {t.level}" onclick={() => app.dismiss(t.id)}>
      <span class="dot"></span>{t.message}
    </button>
  {/each}
</div>

<style>
  .toasts {
    position: fixed;
    left: 50%;
    bottom: 5.5rem;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
    z-index: 30;
    pointer-events: none;
  }

  .toast {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    background: #101720;
    color: var(--ink-soft);
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    pointer-events: auto;
    max-width: min(60rem, 90vw);
    text-align: left;
  }

  .info .dot {
    color: var(--route);
  }
  .warn .dot {
    color: var(--warn);
  }
  .error .dot {
    color: var(--bad);
  }
  .error {
    color: var(--ink);
  }
</style>
