/* extracted from components/ToastContainer.vue */
.toast-enter-active {
  transition:
    opacity 0.26s ease,
    transform 0.36s var(--motion-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

.toast-leave-active {
  transition:
    opacity 0.22s ease,
    transform 0.26s ease;
}

.toast-move {
  transition: transform 0.3s var(--motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.toast-enter-from {
  opacity: 0;
  transform: translateX(38px) scale(0.96);
}

.toast-leave-to {
  opacity: 0;
  transform: translateX(38px) scale(0.96);
}

@media (max-width: 640px) {
  .toast-viewport {
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    left: 12px;
  }

  .toast-card {
    width: 100% !important;
    border-radius: 16px !important;
    padding: 13px !important;
  }
}