/* Flash / toast notification — pill-shaped banner that appears at the top
 * of the viewport, holds visible, then fades out. The base `.flash` is a
 * dark translucent pill; tone modifiers tint the background to signal
 * intent (positive/negative/info/warning).
 *
 * See FlashComponent. The base style was here before the component;
 * the fixed-position container, tone modifiers, and multi-flash
 * stacking were added when FlashComponent landed.
 */

/* Fixed container that floats at the top of the viewport so flashes
 * overlay page content instead of pushing it down. pointer-events: none
 * lets clicks pass through to the page; individual .flash pills
 * re-enable pointer-events so they're still clickable to dismiss. */
.flash-container {
  position: fixed;
  inset: 1rem 0 auto 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-2);
  padding: 0 1rem;
  pointer-events: none;
}

.flash-container > .flash {
  pointer-events: auto;
}

.flash {
  align-items: center;
  animation: appear-then-fade 4s 300ms both;
  backdrop-filter: var(--blur) var(--contrast-75);
  background-color: var(--flash-background, rgb(from var(--color-text) r g b / .65));
  border-radius: var(--rounded-full);
  color: var(--flash-color, var(--color-text-reversed));
  cursor: pointer;             /* clickable to dismiss */
  display: flex;
  font-size: var(--text-base-responsive);
  gap: var(--size-2);
  justify-content: center;
  line-height: var(--leading-none);
  margin-block-start: var(--flash-position, 0);
  margin-inline: auto;
  min-block-size: var(--size-11);
  padding: var(--size-1) var(--size-4);
  text-align: center;

  [data-turbo-preview] & {
    display: none;
  }
}

/* Tone modifiers — tint the pill background to signal intent. The base
 * .flash variables let each tone override just background + text color
 * without redefining the pill geometry. */
.flash--neutral {
  /* falls through to .flash defaults — dark translucent pill */
}

.flash--positive {
  --flash-background: rgb(from var(--color-positive) r g b / .85);
  --flash-color: white;
}

.flash--negative {
  --flash-background: rgb(from var(--color-negative) r g b / .85);
  --flash-color: white;
}

.flash--info {
  --flash-background: rgb(from #3182ce r g b / .85);
  --flash-color: white;
}

.flash--warning {
  --flash-background: rgb(from #d97706 r g b / .9);
  --flash-color: white;
}

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

/* When multiple flashes stack, give later pills a small breathing gap so
 * they don't overlap the earlier one. */
.flash + .flash {
  margin-block-start: var(--size-2);
}

@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; }
}