@utility toast-container {
  @apply fixed z-50;
  @apply top-4 end-4;
  @apply w-xs;
  @apply max-h-screen overflow-y-auto;
}

@utility toast-container-top-start {
  @apply end-auto top-4 start-4;
}

@utility toast-container-top-center {
  @apply end-auto top-4 start-1/2 -translate-x-1/2;
}

@utility toast-container-top-end {
  @apply start-auto top-4 end-4;
}

@utility toast-container-center-start {
  @apply top-1/2 -translate-y-1/2 start-4 end-auto;
}

@utility toast-container-center {
  @apply top-1/2 start-1/2 -translate-y-1/2 -translate-x-1/2;
}

@utility toast-container-center-end {
  @apply top-1/2 -translate-y-1/2 start-auto end-4;
}

@utility toast-container-bottom-start {
  @apply top-auto end-auto bottom-4 start-4;
}

@utility toast-container-bottom-center {
  @apply top-auto end-auto bottom-4 start-1/2 -translate-x-1/2;
}

@utility toast-container-bottom-end {
  @apply top-auto bottom-4 end-4;
}

@utility toast {
  @apply mb-3 text-sm rounded-lg overflow-hidden;
  @apply text-cyan-900 bg-cyan-200;
  @apply shadow-sm;
  @apply block p-0;
  .btn-close-toast {
    @apply text-inherit;
  }
}

@utility toast-xxs {
  &not(.has-title) {
    @apply gap-1;
  }
}

@utility toast-xs {
  &not(.has-title) {
    @apply gap-1.5;
  }
}

@utility toast-sm {
  &not(.has-title) {
    @apply gap-2;
  }
}

@utility toast-lg {
  @apply text-lg;
}

@utility toast-xl {
  @apply text-xl;
}

@utility toast-xxl {
  @apply text-2xl;
}

@utility toast-* {
  color: --value(--color- * -900);
  background-color: --value(--color- * -200);
  .toast-progress-bar {
    background-color: --value(--color- * -800);
  }
}

@utility toast-header {
  @apply flex gap-2;
  @apply p-1.5;
  @apply border-b border-b-black/10;
  .btn-close-toast {
    @apply text-inherit;
  }
}
@utility toast-title {
  @apply flex-1;
  @apply font-medium;
}

@utility toast-body {
  @apply p-2.5;
}

@utility toast-progress {
  @apply relative;
  @apply w-full h-1;
  @apply bg-transparent;
  @apply rounded-lg;
}
@utility toast-progress-bar {
  @apply h-full rounded-lg;
}