:root {
  --green: rgba(196, 9, 15);
}

.toast {
  min-width: 200px;
  background: white;
  position: fixed;
  padding: 20px 15px;
  box-shadow: 0 0 .3rem .3rem rgba(0, 0, 0, 0.05);
  left: 20px;
  bottom: 25px;
  border-left: 6px solid #3c7bf0;
  border-radius: 10px;
  font-size: 2rem;
  overflow: hidden;
  transform: translateX(-130%);
}

.toast.active.succes {
  border-color: var(--green);
}

.toast.active.error {
  border-color: var(--warn);
}

.toast.active {
  transform: translateX(0%);
}

.toast-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 1rem;
}

.toast-content #toast-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  background-color: #3c7bf0;
  color: white;
  border-radius: 50%;
  font-size: 18px;
}

.toast.active.succes .toast-content #toast-icon {
  background-color: var(--green);
}

.toast.active.error .toast-content #toast-icon {
  background-color: var(--warn);
}

.toast-content .message {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.toast-content .message .text-1 {
  font-size: 20px;
  font-weight: 600;
  color: var(--black);
}

.toast-content .message .text-2 {
  font-size: 14px;
  font-weight: 300;
  color: var(--light-color);
}

.toast-content #close-toast {
  position: absolute;
  top: 10px;
  right: 15px;
  padding: 5px;
  opacity: .7;
  cursor: pointer;
}

.toast-content #close-toast:hover {
  opacity: 1;
}

.toast-content .progress {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #ddd;
  width: 100%;
  height: 3px;
}

.toast-content .progress::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #3c7bf0;
}

.toast.active.succes .progress::before {
  background: var(--green);
}

.toast.active .toast-content .progress::before {
  animation: progress 3s linear forwards;
}

.toast.active.error .progress::before {
  background: var(--warn);
}

@media (max-width: 400px) {
  .toast{
    max-width: 200px;
  }
}

@keyframes progress {
  100% {
    right: 100%;
  }
}