.toast {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  transform: translateY(150%);

  div {
    font-size: 1.3rem;
    background-color: var(--bg-toast);
    padding: 8px 16px;
    border-radius: 4px;
    box-shadow: 0 0 20px 3px rgba(0, 0, 0, 0.2);
    transform: translateY(50%);
    animation-name: slide-in-out;
    animation-duration: 2s;
  }

  .alert {
    --bg-toast: var(--pink-2);
  }

  .notice {
    --bg-toast: var(--green-1);
  }
}

@keyframes slide-in-out {
  0% {
    transform: translateY(50%);
  }
  15% {
    transform: translateY(-200%);
  }
  80% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(50%);
  }
}