.flash-messages {
  position: fixed;
  right: 1rem;
  left: auto;
  top: auto;
  bottom: 1rem;

  display: flex;
  flex-direction: column;
  gap: var(--column-gap);
}

.flash {
  animation: appear-then-fade 4s 300ms both;
  background-color: var(--flash-background, var(--color-text));
  border-radius: var(--rounded-full);
  color: var(--flash-color, var(--color-text-reversed));
  margin-block-start: var(--flash-position, var(--size-5));
  margin-inline: auto;

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

.flash__content {
  align-items: center;
  column-gap: var(--size-2);
  display: flex;
  font-size: var(--text-fluid-base);
  justify-content: center;
  line-height: var(--leading-none);
  min-block-size: var(--size-11);
  padding: var(--size-1) var(--size-4);
  text-align: center;
}

.flash--positive {
  --flash-color: light-dark(var(--green-400), var(--green-600));
}

.flash--negative {
  --flash-color: light-dark(var(--red-400), var(--red-600));
}

.flash--extended {
  animation-duration: 15s;
  animation-name: appear-then-fade-extended;
}

@keyframes appear-then-fade {
  0%,
  100% {
    opacity: 0;
  }
  5%,
  60% {
    opacity: 1;
  }
}

@keyframes appear-then-fade-extended {
  0%,
  100% {
    opacity: 0;
  }
  2%,
  90% {
    opacity: 1;
  }
}