@utility toast-container {
  @apply fixed z-50;
  @apply top-4 end-4;

  &.top-start {
    @apply end-auto top-4 start-4;
  }

  &.top-center {
    @apply end-auto top-4 start-1/2 -translate-x-1/2;
  }

  &.bottom-start {
    @apply top-auto end-auto bottom-4 start-4;
  }

  &.bottom-center {
    @apply top-auto end-auto bottom-4 start-1/2 -translate-x-1/2;
  }

  &.bottom-end {
    @apply top-auto bottom-4 end-4;
  }

  &.center-center {
    @apply top-1/2 start-1/2 -translate-y-1/2 -translate-x-1/2;
  }
}
@utility toast {
  @apply flex-space-2 p-2.5 mb-3 text-sm rounded-lg;
  @apply text-cyan-900 bg-cyan-200;
  @apply shadow-sm;

  &.xxs {
    @apply flex-space-1;
    @apply p-1 text-xxs;
  }

  &.xs {
    @apply flex-space-1;
    @apply p-1.5 text-xxs;
  }

  &.sm {
    @apply flex-space-1;
    @apply p-2 text-xs;
  }

  &.lg {
    @apply p-3.5 text-lg;
  }

  &.xl {
    @apply p-4 text-xl;
  }

  &.xxl {
    @apply p-5 text-2xl;
  }
  .btn-close {
    @apply text-inherit;
  }
}
@utility toast-* {
  color: --value(--color-bg- *);
  background-color: --value(--color- *);
}
@utility toast-info {
  color: --value(--color-bg-cyan);
  background-color: --value(--color-cyan);
}
@utility toast-success {
  color: --value(--color-bg-green);
  background-color: --value(--color-green);
}
@utility toast-error {
  color: --value(--color-bg-red);
  background-color: --value(--color-red);
}
@utility toast-danger {
  color: --value(--color-bg-red);
  background-color: --value(--color-red);
}
@utility toast-warning {
  color: --value(--color-bg-yellow);
  background-color: --value(--color-yellow);
}