@reference "@vben/tailwind-config/theme";

.vben-tiptap-content h1 {
  @apply text-2xl font-bold leading-[1.4];
}

.vben-tiptap-content h2 {
  @apply text-xl font-bold leading-[1.45];
}

.vben-tiptap-content h3 {
  @apply text-lg font-semibold leading-[1.5];
}

.vben-tiptap-content h4 {
  @apply text-base font-semibold leading-[1.55];
}

.vben-tiptap-content ul {
  @apply list-disc pl-6;
}

.vben-tiptap-content ol {
  @apply list-decimal pl-6;
}

.vben-tiptap-content blockquote {
  @apply border-l-4 border-primary pl-4 text-muted-foreground;
}

.vben-tiptap-content a {
  @apply text-primary underline decoration-1 underline-offset-[3px];
}

.vben-tiptap-content code {
  @apply rounded-[0.45rem] border border-border bg-secondary px-[0.35rem] py-[0.15rem] text-[0.9em] text-primary;
}

.vben-tiptap-content pre {
  @apply overflow-x-auto rounded-[0.9rem] border border-border bg-popover p-4 text-popover-foreground;
}

.vben-tiptap-content pre code {
  @apply border-none bg-transparent p-0 text-inherit;
}

.vben-tiptap-content img,
.vben-tiptap-content .vben-tiptap__image {
  max-width: min(100%, 640px);
}

/* Image upload states */
.vben-tiptap-upload-wrapper {
  position: relative;
  display: inline-block;
  max-width: min(100%, 640px);
  margin: 1rem 0;
}

.vben-tiptap-upload-wrapper img {
  display: block;
  margin: 0;
  opacity: 0.6;
}

.vben-tiptap-upload-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsl(var(--card) / 30%);
  border-radius: 1rem;
}

.vben-tiptap-upload-spinner::after {
  display: block;
  width: 24px;
  height: 24px;
  content: '';
  border: 2px solid hsl(var(--foreground) / 30%);
  border-top-color: hsl(var(--foreground));
  border-radius: 50%;
  animation: vben-tiptap-spin 0.8s linear infinite;
}

.vben-tiptap-upload-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  overflow: hidden;
  background-color: hsl(var(--muted));
  border-radius: 0 0 1rem 1rem;
}

.vben-tiptap-upload-progress-fill {
  height: 100%;
  background-color: hsl(var(--primary));
  transition: width 0.2s ease;
}

@keyframes vben-tiptap-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}