.flash {
  animation: flash-in-out 5s both;
  animation-timing-function: var(--ease-out-3);
  background-color: var(--color-surface);
  border-radius: var(--rounded-lg);
  border-width: var(--border);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  inline-size: var(--size-full);
  margin: var(--flash-position, var(--size-6)) auto auto;
  max-inline-size: calc(100% - 2rem);

  &:is(:hover, :focus-within) {
    animation-play-state: paused;
  }

  @media (width >= 40rem) {
    max-inline-size: var(--flash-size, var(--max-i-sm));
  }
}

.flash__content {
  padding: var(--size-4);
}

.flash--extended {
  animation-duration: 12s;
  animation-name: flash-in-out-extended;
}

@keyframes flash-in-out {
  0% { opacity: 0; transform: translateY(-100%); }
  8%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); }
}

@keyframes flash-in-out-extended {
  0% { opacity: 0; transform: translateY(-100%); }
  3.3%, 96.7% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); }
}