{% macro h1(text, ref = None) %}
<h1 class="text-4xl font-light mt-0 mb-8 leading-10 text-slate-500"{% if ref %} id="{{ref}}"{% endif %}>
  {{text}}
  {% if ref %}
  <a class="headerlink" href="#{{ref}} title="Permalink to this headline">{{ html_permalinks_icon }}</a>
  {% endif %}
</h1>
{% endmacro %}

{% macro h2(text, ref = None) %}
<h1 class="text-2xl font-light mt-12 mb-6 leading-8 text-slate-500"{% if ref %} id="{{ref}}"{% endif %}>
  {{text}}
  {% if ref %}
  <a class="headerlink" href="#{{ref}}" title="Permalink to this headline">{{ html_permalinks_icon }}</a>
  {% endif %}
</h1>
{% endmacro %}

{% macro h3(text, ref = None) %}
<h1 class="text-xl font-semibold mt-12 mb-6 leading-8 text-slate-500"{% if ref %} id="{{ref}}"{% endif %}>
  {{text}}
  {% if ref %}
  <a class="headerlink" href="#{{ref}}" title="Permalink to this headline">{{ html_permalinks_icon }}</a>
  {% endif %}
</h1>
{% endmacro %}

{% macro menu_subitem(title, url) %}
<li>
  <a class="group block text-slate-700 hover:text-slate-900 py-1 flex items-center" href="{{ url }}">
    <svg  class="mr-2 h-3 w-3 text-slate-400 group-hover:text-slate-900" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7">
    </svg>
    {{ title }}
  </a>
</li>
{% endmacro %}

{% macro menu_item(title, url) %}
<li class="mt-8">
  <a class="block font-semibold hover:text-slate-900 py-1" href="{{ url }}">{{ title }}</a>
  <ul class="ml-4">
    {{- caller() }}
  </ul>
</li>
{% endmacro %}

{% macro menu() %}
<div class="fixed top-[3.8125rem] bottom-0 right-[max(0px,calc(50%-40rem))] w-[19.5rem] py-10 px-8 overflow-y-auto text-sm xl:block hidden">
  <h5 class="mb-4 font-semibold text-slate-900">On this page</h5>
  <ul class="space-y-2 text-slate-700">
    {{- caller() }}
  </ul>
</div>
{% endmacro %}


{% macro prev_next(prev, next) %}
  {% if prev or next %}
    <nav class="text-sm mb-10 text-slate-700 font-semibold flex items-center">
      {% if prev %}
        <a class="group flex items-center hover:text-slate-900" href="{{ prev.link }}">
          <svg class="h-4 w-4 text-slate-700700 group-hover:text-slate-900" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7">
          </svg>
          {{ prev.title }}
        </a>
      {% endif %}

      {% if next %}
        <a class="group ml-auto flex items-center hover:text-slate-900" href="{{ next.link }}">
          {{ next.title }}
          <svg class="h-4 w-4 text-slate-700 group-hover:text-slate-900" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7">
          </svg>
        </a>
      {% endif %}
    </nav>
  {% endif %}
{% endmacro %}