{{ $page := . }}
{{ with $page.Fragments.Headings }}
  <ul
    class='flex flex-col gap-1 relative before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] dark:before:bg-neutral-800 ltr:pl-3 ltr:before:left-0 rtl:pr-3 rtl:before:right-0 ltr:ml-3 rtl:mr-3'
  >
    {{- range . }}
      {{- with .Headings }}
        {{- range . -}}
          <li>
            <a
              href="#{{ anchorize .ID }}"
              class="flex rounded px-2 py-1.5 text-sm transition-colors [word-break:break-word] cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:border gap-2 before:opacity-25 before:content-['#'] text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-neutral-400 dark:hover:bg-primary-100/5 dark:hover:text-gray-50 contrast-more:text-gray-900 contrast-more:dark:text-gray-50 contrast-more:border-transparent contrast-more:hover:border-gray-900 contrast-more:dark:hover:border-gray-50"
            >
              {{- .Title -}}
            </a>
          </li>
        {{ end -}}
      {{ end -}}
    {{ end -}}
  </ul>
{{ end }}