@layer components {
  .plate-editor-toolbar {
    @apply flex flex-wrap items-center gap-2 border-b bg-muted/20 px-3 py-2;
  }

  .plate-editor-toolbar__button {
    @apply rounded-md border bg-background px-2 py-1 text-xs font-medium text-foreground transition-colors;
  }

  .plate-editor-toolbar__button:hover:not(:disabled) {
    @apply bg-accent;
  }

  .plate-editor-toolbar__button:disabled {
    @apply cursor-not-allowed opacity-55;
  }

  .plate-editor-content {
    min-height: 28rem;
    @apply px-5 py-4 text-sm leading-7 outline-none;
  }

  .plate-article {
    @apply break-words text-foreground/90;
  }

  .plate-article-content {
    @apply text-base leading-8 outline-none;
  }

  .plate-editor-content,
  .plate-article-content {
    @apply [&_[data-slate-placeholder=true]]:text-muted-foreground;
  }

  .plate-editor-content :where(h1, h2, h3, h4, h5, h6),
  .plate-article-content :where(h1, h2, h3, h4, h5, h6) {
    margin-top: 1.4em;
    margin-bottom: 0.8rem;
    @apply font-semibold tracking-tight text-foreground;
  }

  .plate-article-content :where(h1, h2, h3, h4, h5, h6) {
    scroll-margin-top: var(--public-article-scroll-offset);
  }

  .plate-article-content :where(h1, h2, h3, h4, h5, h6):target {
    @apply rounded-lg ring-1 ring-primary/20 ring-offset-4 ring-offset-background;
  }

  .plate-editor-content :where(h1),
  .plate-article-content :where(h1) {
    @apply text-3xl;
  }

  .plate-editor-content :where(h2),
  .plate-article-content :where(h2) {
    @apply text-2xl;
  }

  .plate-editor-content :where(h3),
  .plate-article-content :where(h3) {
    @apply text-xl;
  }

  .plate-editor-content :where(p),
  .plate-article-content :where(p) {
    @apply my-3;
  }

  .plate-editor-content :where(a),
  .plate-article-content :where(a) {
    @apply font-semibold text-primary underline decoration-primary/60 underline-offset-2;
  }

  .plate-editor-content :where(blockquote),
  .plate-article-content :where(blockquote) {
    @apply my-6 border-l-4 border-muted-foreground/25 px-4 py-1 text-muted-foreground;
  }

  .plate-editor-content :where(code),
  .plate-article-content :where(code) {
    @apply rounded border border-border/70 bg-muted/35 px-1.5 py-0.5 font-mono text-[0.86em];
  }

  .plate-editor-content :where(pre),
  .plate-article-content :where(pre) {
    @apply my-6 overflow-x-auto rounded-xl border bg-muted/30 px-4 py-3;
  }

  .plate-editor-content pre code,
  .plate-article-content pre code {
    @apply border-0 bg-transparent p-0;
  }

  .plate-editor-content :where(ul, ol),
  .plate-article-content :where(ul, ol) {
    @apply my-4 pl-7;
  }

  .plate-editor-content :where(ul),
  .plate-article-content :where(ul) {
    @apply list-disc;
  }

  .plate-editor-content :where(ol),
  .plate-article-content :where(ol) {
    @apply list-decimal;
  }

  .plate-editor-content :where(hr),
  .plate-article-content :where(hr) {
    @apply my-8 border-border/70;
  }

  .plate-horizontal-rule {
    @apply my-8 border-0 border-t border-border/70;
  }
}
