@layer components {
  @keyframes flash-appear-then-fade {
    0% {
      opacity: 0;
      transform: translateY(-1rem);
    }
    10% {
      opacity: 1;
      transform: translateY(0);
    }
    90% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .flash {
    position: fixed;
    inset-block-start: var(--block-space);
    inset-inline: 0;
    z-index: var(--z-flash);
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  .flash__inner {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.6em 1.2em;
    border-radius: 2rem;
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 500;
    animation: flash-appear-then-fade 3.5s ease both;
    pointer-events: auto;

    /* Default: dark pill */
    background: var(--color-ink);
    color: var(--color-ink-inverted);
    box-shadow:
      0 4px 12px oklch(var(--lch-black) / 15%),
      0 2px 4px oklch(var(--lch-black) / 10%);
  }

  .flash__inner--notice {
    background: var(--color-primary);
    color: white;
  }

  .flash__inner--alert {
    background: var(--color-negative);
    color: white;
  }

  .flash__inner--success {
    background: var(--color-positive);
    color: white;
  }

  /* Icon inside flash */
  .flash__icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
  }
}

/* Dark mode adjustments */
html[data-theme="dark"] .flash__inner {
  box-shadow:
    0 4px 16px oklch(var(--lch-black) / 40%),
    0 2px 4px oklch(var(--lch-black) / 30%);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .flash__inner {
    box-shadow:
      0 4px 16px oklch(var(--lch-black) / 40%),
      0 2px 4px oklch(var(--lch-black) / 30%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flash__inner {
    animation: none;
  }
}