/* =========================
   TOAST SYSTEM
========================= */

.toast-container {
  position: fixed;

  bottom: 20px;
  left: 20px;

  display: flex;
  flex-direction: column;
  gap: 12px;

  z-index: 99999;
  pointer-events: none;
}

.toast {
  position: relative;

  width: fit-content;
  max-width: 420px;
  min-width: 240px;

  padding: 14px 18px;

  border-radius: 10px;

  display: flex;
  align-items: center;
  gap: 12px;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;

  color: white;

  border: 1px solid rgba(0,0,0,0.18);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 5px 14px rgba(0,0,0,0.22);

  animation:
    toastIn 0.18s ease,
    toastOut 0.18s ease calc(var(--toast-duration, 3000ms) - 180ms) forwards;
}

/* ICON */
.toast-icon {
  width: 22px;
  height: 22px;

  flex-shrink: 0;

  opacity: 0.98;

  filter: brightness(0) invert(1);
}

/* SUCCESS */
.toast.success {
  background: linear-gradient(
    #63b978,
    #4f9c63
  );
}

/* INFO */
.toast.info {
  background: linear-gradient(
    #6ca8d6,
    #4f8fbe
  );
}

/* WARNING */
.toast.warning {
  background: linear-gradient(
    #e1c15a,
    #cfa63d
  );

  color: #fff;
}

/* DELETE */
.toast.delete {
  background: linear-gradient(
    #df6666,
    #c84e4e
  );
}

/* OBLITERATE */
.toast.obliterate {
  background: linear-gradient(
    #a32626,
    #7f1616
  );
}

/* ERROR */
.toast.error {
  background: linear-gradient(
    #d85d5d,
    #bb4444
  );
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-12px);
  }
}