.mv-toast-stack {
  position: fixed;
  inset: auto 16px 24px;
  z-index: 120;
  display: grid;
  justify-items: center;
  pointer-events: none;
}

.mv-toast {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 36px;
  inline-size: min(460px, calc(100vw - 32px));
  min-block-size: 58px;
  box-sizing: border-box;
  padding: 10px 8px 10px 12px;
  gap: 10px;
  align-items: center;
  color: var(--mv-paper);
  background: var(--mv-ink-950);
  border: 1px solid color-mix(in oklch, var(--mv-brand-300) 34%, var(--mv-ink-950));
  border-radius: 13px;
  box-shadow: 0 14px 36px rgb(3 25 35 / .24);
  opacity: 0;
  pointer-events: auto;
  transform: translate3d(0, 16px, 0) scale(.98);
  transition: opacity 220ms cubic-bezier(.23, 1, .32, 1), transform 280ms cubic-bezier(.23, 1, .32, 1);
}

.mv-toast.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.mv-toast.is-leaving { opacity: 0; transform: translate3d(0, 8px, 0) scale(.985); transition-duration: 160ms, 180ms; }
.mv-toast__icon { display: grid; inline-size: 28px; block-size: 28px; place-items: center; color: var(--mv-ink-950); background: var(--mv-brand-300); border-radius: 50%; font-size: 13px; font-weight: 800; }
.mv-toast.is-error .mv-toast__icon { color: var(--mv-paper); background: var(--mv-danger); }
.mv-toast.is-info .mv-toast__icon { color: var(--mv-paper); background: var(--mv-brand-700); }
.mv-toast__content { display: flex; min-inline-size: 0; gap: 8px 12px; align-items: baseline; font-size: 14px; line-height: 19px; }
.mv-toast__content > span { min-inline-size: 0; overflow-wrap: anywhere; }
.mv-toast__content a { flex: none; color: var(--mv-brand-300); font-weight: 680; text-decoration: none; white-space: nowrap; }
.mv-toast__content a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mv-toast__close { display: grid; inline-size: 36px; block-size: 36px; padding: 0; place-items: center; color: var(--mv-paper); background: transparent; border: 0; border-radius: 8px; font: inherit; font-size: 22px; cursor: pointer; transition: background-color 160ms ease, transform 140ms cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) {
  .mv-toast__close:hover { background: rgb(244 251 254 / .1); }
}
.mv-toast__close:active { transform: scale(.94); }

@media (max-width: 62rem) {
  .mv-toast-stack { bottom: 96px; }
}

@media (max-width: 30rem) {
  .mv-toast { grid-template-columns: 26px minmax(0, 1fr) 36px; gap: 9px; }
  .mv-toast__icon { inline-size: 26px; block-size: 26px; }
  .mv-toast__content { display: grid; gap: 2px; font-size: 13px; line-height: 18px; }
  .mv-toast__content a { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-toast,
  .mv-toast.is-leaving { transform: none; transition: opacity 120ms ease; }
}