{% load static %}
<div class="absolute inset-x-0 right-0 z-10 sm:top-2 top-4">
    <details class="group py-2 absolute right-2 open:w-auto open:static w-fit open:mx-4 open:rounded-md h-auto open:bg-bluelight-background open:shadow-sm open:shadow-[#242424]">
        <summary class="block float-right p-2 mt-2 mr-6 list-none transition sm:m-0 group-open:m-0 content-none group-open:justify-end">
            <img class="p-2 w-12 h-12 group-open:hidden rounded-md bg-bluelight-background shadow-sm shadow-[#242424]" src="{% static "tracker/images/question_mark.png" %}" alt="About this tracker" width="32" height="32" />
            <img class="hidden w-8 h-8 ml-2 rounded-md shadow-sm shadow-[#242424] bg-gradient-to-br from-highlight-empty-light to-highlight-empty-dark group-open:flex" src="{% static "tracker/images/x_mark.png" %}" alt="About this tracker" width="" height="" />
        </summary>
        <div class="block p-2 space-y-2">
            <p class="w-full px-2 pt-2 text-lg">About</p>
            <hr class="justify-start w-full border-2 border-bluelight-translucent-dark rounded-xl" />
        </div>
        <div class="flex flex-col flex-grow-0 p-2 space-y-2 max-h-[80svh] overflow-y-auto scrollbar-none">
            {% include "tracker/howto/index.html" %}
            {% include "tracker/settings/block.html" %}
            {% include "tracker/credits/index.html" %}
            {% include "tracker/src/index.html" with tracker_fe_link="https://gitea.werefox.cafe/ada/tunic-tracker-redux/src/branch/plugin-backend" tracker_be_link="https://github.com/spaceglace/tunic-randomizer/" %}
        </div>
    </details>
</div>
