/* Only loads Inter for toast */
@font-face {
  font-family: "Inter";
  src: url("../../fonts/inter/Inter-Regular.woff2") format("woff2");
  font-style: normal;
}

/* Toast Notification */
.toast-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #fbf4f5;
  border: 2px solid #B8203A;
  color: #121222;
  padding: 5px 15px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: left;
  font-size: 14px;
  font-family: "Inter";
  z-index: 999999 !important;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 280px !important;
  min-height: 32px !important;
  opacity: 0;
  transform: translateY(100%);
  display: none;
}


.toast-notification-visible {
  display: flex;
  animation: toast-fadeIn 0.5s ease forwards;
}

.toast-notification-hiding {
  animation: toast-fadeOut 0.5s ease forwards;
}

.toast-notification-success {
  background-color: #f4fbf5 !important;
  border-color: #88d588 !important;
}

.toast-notification-warning {
  background-color: #fbf9f4 !important;
  border-color: #d5b588 !important;
}

.toast-notification-error {
  background-color: #fbf4f5 !important;
  border-color: #d58892 !important;
}

.toast-notification-info {
  background-color: #f4f7fb !important;
  border-color: #8892d5 !important;
}

/* Fade in animation */
@keyframes toast-fadeIn {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade out animation */
@keyframes toast-fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}

.toast-notification svg {
  flex-shrink: 0;
}

.toast-notification-success svg {
  fill: #88d588 !important;
}

.toast-notification-warning svg {
  fill: #d5b588 !important;
}

.toast-notification-error svg {
  fill: #d58892 !important;
}

.toast-notification-info svg {
  fill: #8892d5 !important;
}