{{# The element that contains this partial must have `display: relative;` for it to function correctly #}}
<div
    class="absolute bottom-4 flex items-end"
    style="{{ align_right ? "right: 1rem; justify-content: flex-end;" : "left: 1rem;" }}"
    x-data="{ active: false }"
    :class="{ '{{ align_right ? "left-4" : "right-4" }}': active }"
>
    <button
        class="flex items-start gap-2 rounded-md bg-black/60 p-2 transition hover:bg-black/80"
        @click="active = !active"
        :class="{ '!bg-black/80': active }"
    >
        <span class="flex-shrink-0" :class="{ 'hidden': active }">
            {{ svg src="images/icons/info.svg" class="w-7 h-7 fill-white group-active:hidden" }}
        </span>
        <span
            x-cloak
            class="{{ align_right ? 'flex-row-reverse' : 'flex-row' }} inline-flex flex-grow items-center gap-2.5"
            :class="{ 'hidden': !active }"
        >
            {{ svg src="images/icons/info-filled.svg" class="block w-7 h-7 fill-white flex-shrink-0 self-end" }}
            <span class="text-left text-white">
                {{ caption_text }}
            </span>
        </span>
    </button>
</div>