#autotoast {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 20px;
  z-index: 9999999;
  cursor: pointer;
  transition: 0.2s;
}

#autotoast > span {
  pointer-events: auto;
  width: max-content;
  animation: fadein 0.4s;
  animation-delay: 0s;
  border-radius: 6px;
  padding: 10px 20px;
  box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.1);
  margin: 4px;
  transition: 0.2s;
  z-index: 9999999;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: max-content;
  overflow: hidden;
  background-color: #fafafa;
}

#autotoast > span > span {
  max-width: 50vw;
}

#autotoast span.hide {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  height: 0;
  padding: 0;
  margin: 0;
}

#autotoast > .autotoast-warn {
  background-color: #fffaec;
  color: #e29505;
}

#autotoast > .autotoast-error {
  background-color: #fde7e7;
  color: #d93025;
}

#autotoast > .autotoast-info {
  background-color: #e6f7ff;
  color: #0e6eb8;
}

#autotoast > .autotoast-success {
  background-color: #e9f7e7;
  color: #1a9e2c;
}

#autotoast > .autotoast- {
  background-color: #fafafa;
  color: #333;
}

@keyframes fadein {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
