@import '@legends/styles/base.scss';

.toastsContainer {
  display: flex;
  flex-direction: column-reverse;
  row-gap: 0.75rem;
  position: fixed;
  z-index: 9999;
  top: 2rem;
  right: 2rem;
}

.toast {
  position: relative;
  background-color: $tertiaryBackground;
  border-radius: $primaryBorderRadius;
  border: 1px solid $primaryBorder;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem 1rem;
  padding-right: 4rem;
  /* rest of the properties */
  animation: slide-in 0.4s ease-in-out forwards;

  &.dismissed {
    animation: slide-out 0.4s ease-in-out forwards;
  }

  .toastMessage {
    font-family: $primaryFont;
    font-size: 0.875rem;
    color: $primaryText;
  }

  .toastProgress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.25rem;
    background-color: $tertiaryBackground;
  }

  .toastProgressBar {
    height: 100%;
    animation: progressBar linear forwards;
  }

  .dismissBtn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: $tertiaryText;
  }

  &.success {
    .toastProgressBar {
      background-color: $success;
    }
    .icon {
      color: $success;
    }
  }
  &.info {
    .toastProgressBar {
      background-color: $info;
    }
    .icon {
      color: $info;
    }
  }
  &.warning {
    .toastProgressBar {
      background-color: $warning;
    }
    .icon {
      color: $warning;
    }
  }
  &.error {
    .toastProgressBar {
      background-color: $error;
    }
    .icon {
      color: $error;
    }
  }
}

@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes slide-out {
  0% {
    opacity: 1;
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes progressBar {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
