---
type Props = {
  tableOfContents: string
}

const { tableOfContents } = Astro.props
---

<style>
  .toc {
    background: var(--box-background-color);
    padding: var(--spacer);
    border-radius: var(--border-radius);
    border: var(--border-width) solid var(--border-color);
    margin-bottom: calc(var(--spacer) * var(--line-height));
  }

  .toc :global(ul),
  .toc :global(p) {
    margin: 0;
  }

  .toc :global(li) {
    margin-top: calc(var(--spacer) / 6);
    margin-bottom: calc(var(--spacer) / 6);
  }
</style>

<nav aria-label="Table of Contents" class="toc" set:html={tableOfContents} />