.flash {
  animation: flash-in-out var(--flash-duration, 5s) both;
  animation-timing-function: var(--ease-bounce-2);
  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 {
  --flash-duration: 12s;
}

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

  8%, 92% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: ease-in;
  }

  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}