/* Toast */
.ui-toast {
  @apply flex w-full max-w-sm items-start gap-3 rounded-md px-4 py-3 text-white;
}

.ui-toast__status-wrapper {
  @apply flex h-5 items-center;
}

.ui-toast__status-icon {
  @apply inline-flex text-white;
}

.ui-toast__content {
  @apply min-w-0 flex-1;
}

.ui-toast__title {
  @apply text-sm leading-5 font-semibold;
}

.ui-toast__description {
  @apply mt-1 text-sm leading-5 font-normal;
}

.ui-toast__close {
  @apply inline-flex size-4 items-center justify-center border-0 bg-transparent p-0 text-white cursor-pointer;
}

/* Status */
.ui-toast--success {
  @apply bg-teal-600;
}

.ui-toast--warning {
  @apply bg-amber-500;
}

.ui-toast--error {
  @apply bg-red-500;
}

.ui-toast--info {
  @apply bg-gray-500;
}

/* viewport */
.ui-toast-viewport {
  @apply pointer-events-none fixed right-4 bottom-4 z-50 flex w-full max-w-sm flex-col items-end;
}

.ui-toast-viewport__item {
  @apply pointer-events-auto w-full opacity-0;
  transform: translateY(16px);
  will-change: transform, opacity;
}

.ui-toast-viewport__item--visible {
  animation: ui-toast-slide-in-from-bottom var(--ui-toast-transition-duration) ease forwards;
}

.ui-toast-viewport__item--leaving {
  animation: ui-toast-slide-out-to-bottom var(--ui-toast-transition-duration) ease forwards;
}

@keyframes ui-toast-slide-in-from-bottom {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

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

@keyframes ui-toast-slide-out-to-bottom {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(16px);
  }
}