@keyframes flash-enter {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes flash-auto-dismiss {
  0%   { opacity: 0; transform: translateY(-0.5rem); }
  5%   { opacity: 1; transform: translateY(0); }
  85%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-0.5rem); }
}

.flash {
  display: flex;
  position: fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  justify-content: center;
  z-index: 60;
}

.flash__inner {
  animation: flash-auto-dismiss 8s 200ms both;
  background-color: var(--flash-background, #27272a);
  border-radius: 4em;
  color: #fff;
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
  inline-size: max-content;
  margin: 0 auto;
  max-inline-size: 90vw;
  padding: 0.7em 1.4em;
}

.flash__inner--alert {
  animation: flash-enter 300ms ease-out both;
}