/* A stack of toasts centred at the top of the screen. The group drops in
   together; each toast leaves on its own once it has been read or clicked. */

.flash {
  position: fixed;
  top: var(--space-lg);
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding-inline: var(--space-sm);
  pointer-events: none;
  transform: translateY(-200%) scale(0.6);
  animation: flash-in 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) 0.1s forwards;
}

@keyframes flash-in {
  to {
    transform: translateY(0) scale(1);
  }
}

.flash__item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  max-width: 70vw;
  padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
  font-weight: var(--weight-medium);
  /* The group lets clicks through to the page; the toasts themselves take them,
     since clicking one dismisses it. */
  pointer-events: auto;
  cursor: pointer;
}

.flash__item--removing {
  animation: flash-out 0.4s cubic-bezier(0.06, 0.71, 0.55, 1) forwards;
}

@keyframes flash-out {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(-150%) scale(0.6);
    opacity: 0;
  }
}

.flash__icon {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

.flash__item--notice .flash__icon {
  color: var(--color-saved);
}

.flash__item--alert .flash__icon {
  color: var(--color-danger);
}

/* The tick is drawn on: the disc pops first, then the stroke unrolls into it. */
.flash__circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: flash-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

@keyframes flash-pop {
  to {
    transform: scale(1);
  }
}

.flash__check {
  fill: none;
  stroke: var(--color-surface);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  animation: flash-draw 0.3s ease-out 0.45s forwards;
}

@keyframes flash-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 52rem) {
  .flash__item {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flash,
  .flash__item--removing,
  .flash__circle,
  .flash__check {
    animation: none;
  }

  .flash {
    transform: none;
  }

  .flash__item--removing {
    opacity: 0;
  }

  .flash__circle {
    transform: scale(1);
  }

  .flash__check {
    stroke-dashoffset: 0;
  }
}