/* CRISPY-TOAST.CSS */
/* ------------------------------------------------------------- */

/* DEFINING-COLORS */
:root {
  --light-blue: #e1f5fe;
  --dark-blue: #01579b;
  --light-green: #c8e6c9;
  --dark-green: #2e7d32;
  --light-orange: #fff0b2;
  --dark-orange: #e65100;
  --light-cyan: #e0f7fa;
  --dark-cyan: #00838f;
  --light-red: #ffcdd2;
  --dark-red: #b71c1c;
}

/* ADD ANIMATION KEYFRAMES FOR ZOOM EFFECT */
@keyframes zoomInEffect {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.crispy-toast {
  position: fixed;
  padding: 10px 20px;
  border-radius: 0px;
  color: white;
  font-weight: light;
  z-index: 9999;
  opacity: 1; /* Start with 0 opacity */
  animation: zoomInEffect 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  font-family: Arial, Helvetica, sans-serif;
  font-size: small;
  min-width: 15rem;
  min-height: 1.2rem;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.crispy-toast.message {
  background-color: var(--light-blue);
  color: var(--dark-blue);
}

.crispy-toast.success {
  background-color: var(--light-green);
  color: var(--dark-green);
}

.crispy-toast.info {
  background-color: var(--light-cyan);
  color: var(--dark-cyan);
}

.crispy-toast.warning {
  background-color: var(--light-orange);
  color: var(--dark-orange);
}
.crispy-toast.error {
  background-color: var(--light-red);
  color: var(--dark-red);
}

/* ADD PROGRESS BAR ANIMATION */
.crispy-toast::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: white;
  transform-origin: left;
  transform: scaleX(1);
  animation: progressBar 3s linear forwards;
}

@keyframes progressBar {
  to {
    transform: scaleX(0);
  }
}

/* PROGESS BAR COLORS AS PER MESSAGE TYPE */
.crispy-toast.message::before {
  background-color: var(--dark-blue) !important;
}
.crispy-toast.success::before {
  background-color: var(--dark-green) !important;
}
.crispy-toast.info::before {
  background-color: var(--dark-cyan) !important;
}
.crispy-toast.warning::before {
  background-color: var(--dark-orange) !important;
}
.crispy-toast.error::before {
  background-color: var(--dark-red) !important;
}

/* POSITIONINGS */

.crispy-toast.top-right {
  top: 20px;
  right: 20px;
}

.crispy-toast.top-left {
  top: 20px;
  left: 20px;
}

.crispy-toast.bottom-right {
  bottom: 20px;
  right: 20px;
}

.crispy-toast.bottom-left {
  bottom: 20px;
  left: 20px;
}

/* Add more position styles as needed */