@layer components {
  .flash {
    position: fixed;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-s);

    max-width: 100%;
    width: max-content;
    padding: 0 var(--space-m);
    z-index: 1001;
  }

  .flash__message {
    font-size: var(--font-size-s);
    color: var(--color-white);
    padding: var(--space-xs) var(--space-m);
    background-color: var(--color-ink-dark);
    animation: appear-then-fade 8s both;
    border-radius: 999px;
  }

  /* Flash rendered absolute inside a slide-over panel. Must be a descendant
     of a `position-relative` ancestor; pointer-events:none lets clicks pass
     through to the panel content behind. */
  .floating-flash {
    position: absolute;
    inset-inline: 0;
    top: var(--block-space);
    z-index: 10;
    pointer-events: none;
    display: flex;
    justify-content: center;
  }
}