@tailwind utilities;

/* FIXME: できればHTML上で実装したいが、Viewを表示する方法を見つけられていない */
/* Turbo Error Messages */
.turbo-error-message {
  @apply animate-in slide-in-from-top-2 duration-300;
}

.turbo-error-info {
  @apply bg-blue-50 border-blue-200 text-blue-800;
}

.turbo-error-warning {
  @apply bg-yellow-50 border-yellow-200 text-yellow-800;
}

.turbo-error-error {
  @apply bg-red-50 border-red-200 text-red-800;
}

.turbo-error-container {
  @apply max-w-sm;
}

@keyframes slide-in-from-top-2 {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation-fill-mode: both;
}

.slide-in-from-top-2 {
  animation-name: slide-in-from-top-2;
}

.duration-300 {
  animation-duration: 300ms;
}