.flash {
  align-items: center;
  animation: appear-then-fade 4s 300ms both;
  backdrop-filter: blur(4px);
  background-color: var(--flash-background, var(--color-bg));
  border: 1px solid var(--flash-border, var(--color-border));
  border-radius: var(--rounded-md);
  color: var(--flash-color, var(--color-text));
  column-gap: var(--size-2);
  display: flex;
  font-size: var(--text-base);
  justify-content: center;
  line-height: 1.5;
  margin-block-start: var(--flash-position, var(--size-4));
  margin-inline: auto;
  min-block-size: var(--size-11);
  padding: var(--size-2) var(--size-4);
  text-align: center;
  box-shadow: var(--shadow-sm);
  position: fixed;
  top: var(--size-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;

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

.flash--positive {
  --flash-background: var(--color-positive);
  --flash-color: white;
  --flash-border: var(--color-positive);
}

.flash--negative {
  --flash-background: var(--color-negative);
  --flash-color: white;
  --flash-border: var(--color-negative);
}

.flash--notice {
  --flash-background: var(--color-primary);
  --flash-color: var(--color-text-reversed);
  --flash-border: var(--color-primary);
}

.flash--alert {
  --flash-background: var(--color-negative);
  --flash-color: white;
  --flash-border: var(--color-negative);
}

.flash--warning {
  --flash-background: var(--yellow-600);
  --flash-color: white;
  --flash-border: var(--yellow-600);
}

.flash--info {
  --flash-background: var(--blue-600);
  --flash-color: white;
  --flash-border: var(--blue-600);
}

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

/* Flash variants */
.flash--sm {
  font-size: var(--text-sm);
  padding: var(--size-1) var(--size-3);
  min-block-size: var(--size-8);
}

.flash--lg {
  font-size: var(--text-lg);
  padding: var(--size-3) var(--size-6);
  min-block-size: var(--size-14);
}

@keyframes appear-then-fade {
  0%, 100% { 
    opacity: 0; 
    transform: translateX(-50%) translateY(-100%);
  }
  5%, 60% { 
    opacity: 1; 
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes appear-then-fade-extended {
  0%, 100% { 
    opacity: 0; 
    transform: translateX(-50%) translateY(-100%);
  }
  2%, 90% { 
    opacity: 1; 
    transform: translateX(-50%) translateY(0);
  }
}