/* Each alert is wrapped in a grid so its row can collapse from 1fr → 0fr, letting the
   siblings glide up smoothly instead of jumping when one leaves. The card's transform and
   opacity are driven from the component (swipe drag, fling, drag-fade); the exit fade and
   height-collapse are owned here so every dismissal path — swipe, close button, auto-timeout
   — animates out rather than vanishing instantly. */

:host {
  --mn-alert-exit: 320ms;
}

.mn-alert-item {
  display: grid;
  grid-template-rows: 1fr;
  margin-bottom: 0.75rem;
  /* `touch-action` is set from the component per platform (pan-y for the horizontal swipe
     axis, pan-x for the vertical one); this is only the pre-hydration fallback. */
  touch-action: pan-y;
  cursor: grab;
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity var(--mn-alert-exit) ease,
    grid-template-rows var(--mn-alert-exit) cubic-bezier(0.4, 0, 0.2, 1),
    margin-bottom var(--mn-alert-exit) cubic-bezier(0.4, 0, 0.2, 1);
}

.mn-alert-item:last-child {
  margin-bottom: 0;
}

.mn-alert-item.dragging {
  /* Track the finger 1:1 — no easing while a drag is live. */
  transition: none;
  cursor: grabbing;
  user-select: none;
}

.mn-alert-inner {
  /* Required for the grid row to actually shrink its content on collapse. */
  min-height: 0;
}

.mn-alert-item.leaving {
  grid-template-rows: 0fr;
  opacity: 0;
  margin-bottom: 0;
  pointer-events: none;
}

.mn-alert-item.leaving .mn-alert-inner {
  /* Clip the card as its row collapses; kept visible otherwise so the card's shadow shows. */
  overflow: hidden;
}

/* Countdown bar: a hairline track pinned to the card's bottom edge whose fill drains over the
   alert's lifetime, so the remaining time is visible rather than guessed. The bar runs the full
   width and the card clips it (`overflow-hidden` on the card in the template), so its ends taper
   along the card's rounded corners instead of cutting straight across them. The track's own
   `overflow: hidden` is what clips the draining fill. */

.mn-alert-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  overflow: hidden;
  background-color: color-mix(in srgb, currentColor 18%, transparent);
  pointer-events: none;
}

.mn-alert-progress-bar {
  display: block;
  height: 100%;
  background-color: currentColor;
  opacity: 0.55;
  transform-origin: left center;
  /* Duration is bound per alert from the component; the rest of the timing lives here. */
  animation-name: mn-alert-countdown;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes mn-alert-countdown {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mn-alert-item {
    transition: none;
  }
}