.flash-region {
  --flash-max-size: 24rem;

  position: fixed;
  inset-block: auto var(--space-md);
  inset-inline: auto var(--space-md);
  z-index: var(--z-notification);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
  max-inline-size: min(var(--flash-max-size), calc(100vw - var(--space-3xl)));
  pointer-events: none;
}

.flash {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  padding-inline: var(--space-md) var(--space-sm);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  font-size: var(--font-size-ui);
  pointer-events: auto;
  animation: flash-enter var(--duration-enter) var(--easing-enter) backwards;
  animation-delay: calc(var(--stack-index, 0) * var(--duration-stagger));
}

.flash__content {
  display: flex;
  align-items: flex-start;
  flex: 1;
  gap: var(--space-sm);
  min-inline-size: 0;
}

.flash__icon {
  margin-block-start: calc((var(--line-height-ui) * 1em - 1em) / 2);
}

.flash__message {
  flex: 1;
  min-inline-size: 0;
  line-height: var(--line-height-ui);
}

.flash__actions {
  display: flex;
  flex: none;
  gap: var(--space-3xs);
}

.flash__close {
  flex: none;
}

.flash--notice .flash__icon {
  color: var(--color-incoming);
}

.flash--alert .flash__icon {
  color: var(--color-negative);
}

.flash[data-leaving] {
  animation: flash-leave var(--duration-leave) var(--easing-leave) forwards;
}

@keyframes flash-enter {
  from {
    opacity: 0;
    translate: 0 var(--space-md);
    scale: var(--scale-recessed);
  }
}

@keyframes flash-leave {
  to {
    opacity: 0;
    translate: 0 var(--space-xs);
    scale: var(--scale-recessed);
  }
}

@media (width <= 48rem) {
  .flash-region {
    inset-block: auto calc(var(--dock-height, 0px) + var(--space-md));
    inset-inline: var(--space-md);
    align-items: stretch;
    max-inline-size: none;
  }
}

@media (forced-colors: active) {
  .flash {
    border: var(--border-width) solid currentcolor;
  }
}