@keyframes flash-appear-then-fade {
  0% { opacity: 0; transform: translateY(-6px); }
  15% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

@layer modules {
  .flash {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    translate: -50% 0;
    display: flex;
    justify-content: center;
    width: min(90vw, 30rem);
    z-index: var(--z-60);
    pointer-events: none;
  }

  .flash__inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--radius-full);
    padding: 0.85rem 1.4rem;
    font-weight: var(--font-weight-semibold);
    width: 100%;
    text-align: center;
    pointer-events: auto;
    box-shadow: 0 18px 40px -20px rgba(15, 23, 42, 0.35);
    animation: flash-appear-then-fade 3s 250ms both;
  }

  .flash__inner--notice {
    background-color: var(--color-sky-50);
    border: 1px solid var(--color-sky-200);
    color: var(--color-sky-900);
  }

  .flash__inner--alert {
    background-color: var(--color-rose-50);
    border: 1px solid var(--color-rose-200);
    color: var(--color-rose-900);
  }
}