@layer components {

  .flash {
    display: flex;
    inset-block-start: var(--block-space);
    inset-inline-start: 50%;
    justify-content: center;
    position: fixed;
    transform: translate(-50%);
    z-index: var(--z-flash);
  }

  .flash__inner {
    animation: flash-appear-fade 4s 200ms both;
    background-color: var(--flash-background, var(--color-ink));
    border-radius: var(--radius-full);
    color: var(--flash-color, var(--color-ink-inverted));
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    margin: 0 auto;
    padding: 0.6em 1.3em;
    box-shadow: var(--shadow-md);
  }

  .flash--notice .flash__inner {
    --flash-background: var(--color-success-dark);
    --flash-color: oklch(var(--lch-white));
  }

  .flash--alert .flash__inner {
    --flash-background: var(--color-danger-base);
    --flash-color: oklch(var(--lch-white));
  }

  .flash--warning .flash__inner {
    --flash-background: var(--color-warning-dark);
    --flash-color: oklch(var(--lch-white));
  }

  .flash--info .flash__inner {
    --flash-background: var(--color-ink-darker);
    --flash-color: oklch(var(--lch-white));
  }
}

@keyframes flash-appear-fade {
  0%   { opacity: 0; transform: translateY(-0.5rem) scale(0.97); }
  10%  { opacity: 1; transform: translateY(0) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}