<script lang="ts">
  import type { HTMLAttributes } from "svelte/elements";
  let {
    class: className = "",
    children,
    ...props
  }: HTMLAttributes<HTMLDivElement> = $props();
</script>

<div
  {...props}
  class={`
    prose prose-slate max-w-none font-base

    prose-headings:font-accent prose-headings:underline

    prose-a:text-blue-600 prose-a:no-underline
    prose-a:hover:underline

    prose-ul:pl-9 prose-ol:pl-9

    prose-kbd:border-s-slate-950 prose-kbd:rounded-md
    prose-kbd:border-l prose-kbd:border-t prose-kbd:border-r-3 prose-kbd:border-b-3
    ${className}
  `}
>
  {@render children?.()}
</div>
