.toast {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  height: 125px;
  width: 400px;
  max-width: 80vw;
  border-radius: 20px;
  text-align: start;
  padding: 0.5rem;
  display: flex;
  animation: slide-in-to-out 4s ease-in forwards;
}

.toast.default {
  background: var(--borders-color-1);
  background: linear-gradient(135deg, var(--borders-color-1) 0%, var(--borders-color-2) 100%);
}

.toast.success {
  background: var(--color-success);
  background: linear-gradient(135deg, var(--color-success) 40%, var(--borders-color-1) 100%);
}

.toast.error {
  background: #ff0a0a;
  background: linear-gradient(135deg, rgb(255, 10, 10) 0%, rgb(253, 215, 0) 100%);
}

.toast>section {
  border-radius: 20px;
  background: var(--bg-grd-2);
  padding: 0.5rem;
  width: 100%;
}

@keyframes slide-in-to-out {
  0% {
    opacity: 0;
    right: -10%;
  }

  10% {
    opacity: 1;
    right: 5%;
  }

  80% {
    opacity: 1;
    right: 6%;
  }

  100% {
    opacity: 0;
    right: 110%;
  }
}