/*
 * On phones the top of the page holds the title and the page's main action
 * (Scan purchases), and every redirect lands you there, so a flash dropping in
 * from the top sat right on top of what you reach for next. There it rises
 * from the bottom instead, just above any action bar, and leaves sooner. A tap
 * anywhere on it dismisses it.
 */
.flash {
  animation: flash-in-out var(--flash-duration, 5s) both;
  animation-timing-function: var(--ease-out-3);
  background-color: var(--color-surface);
  border-radius: var(--rounded-lg);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--text-sm);
  inline-size: var(--size-full);
  margin: var(--size-20) auto auto;
  max-inline-size: calc(100% - var(--size-8));

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

  @media (width < 40rem) {
    --flash-duration: 3s;
    --flash-from: 100%;

    /* Hugging the text at the start edge keeps it off the steppers and other
       row actions, which sit at the end edge under your thumb. */
    inline-size: fit-content;
    margin: auto auto calc(var(--flash-offset, 0px) + env(safe-area-inset-bottom) + var(--size-3)) var(--size-4);
  }

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

  @media (prefers-reduced-motion: reduce) {
    --flash-from: 0;
  }
}

/* Holds the messages in place across refreshes without taking a slot in the
   page's grid; the messages themselves live in the top layer. */
.flash-container {
  display: contents;
}

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

  @media (width < 40rem) {
    padding: var(--size-3) var(--size-4);
  }
}

.flash--negative {
  background-color: var(--color-surface-negative);
  color: var(--color-text-negative);
}

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

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

  8%, 92% {
    opacity: 1; transform: translateY(0);
  }

  100% {
    opacity: 0; transform: translateY(var(--flash-from, -100%));
  }
}

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

  3.3%, 96.7% {
    opacity: 1; transform: translateY(0);
  }

  100% {
    opacity: 0; transform: translateY(var(--flash-from, -100%));
  }
}