<!--
    Component: TypographyMenu
    Provides a menu for selecting and configuring typography settings
-->
<script lang="ts">
import { SetupFontMenu } from '$features/SetupFont';
import {
    Content as ItemContent,
    Root as ItemRoot,
} from '$shared/shadcn/ui/item';

import { cubicOut } from 'svelte/easing';
import { crossfade } from 'svelte/transition';

const [send, receive] = crossfade({
    duration: 400,
    easing: cubicOut,
    fallback(node, params) {
        // If it can't find a pair, it falls back to a simple fade/slide
        return {
            duration: 400,
            css: t => `opacity: ${t}; transform: translateY(${(1 - t) * 10}px);`,
        };
    },
});
</script>

<div
    class="w-auto fixed bottom-4 sm:bottom-5 left-4 right-4 sm:left-auto sm:right-auto sm:inset-x-0 max-screen z-10 flex justify-center"
    in:receive={{ key: 'panel' }}
    out:send={{ key: 'panel' }}
>
    <ItemRoot
        variant="outline"
        class="w-auto max-w-full sm:max-w-max p-2 sm:p-2.5 rounded-xl sm:rounded-2xl backdrop-blur-lg"
    >
        <ItemContent class="flex flex-row justify-center items-center max-w-full sm:max-w-max">
            <SetupFontMenu />
        </ItemContent>
    </ItemRoot>
</div>
