<script lang="ts">
    import SizeControl from './SizeControl.svelte'
    import FontSelect from './FontSelect.svelte'

    let showing = $state(false)
    let font = $state('sans-serif')
    let size = $state(1)
    let line = $state(1)

    let article: HTMLElement | null = $state(null)
    $effect(() => {
        article = document.querySelector('#main > article')
    })
    $effect(() => {
        if (article) {
            article.dataset.font = font
            article.style.fontSize = size+'rem'
            article.style.setProperty('--height', line+'')
        }
    })
</script>

<div data-font="sans-serif" data-pagefind-ignore="all">
    <button class="toggle" onclick={() => showing = !showing}>
        <svg viewBox="0 0 24 24" class="icon"><path d="M3 7v-2h13v2" /><path d="M10 5v14" /><path d="M12 19h-4" /><path d="M15 13v-1h6v1" /><path d="M18 12v7" /><path d="M17 19h2" /></svg>
        View options
    </button>
    <menu class:showing data-component>
        <li class="size">
            <span>Font size</span>