<style>
    #mobile_filters_panel {
      transform: translateX(-100%);
      transition: transform 0.1s ease-in-out;
    }
    #mobile_filters_panel.open {
      transform: translateX(0);
    }
    #mobile_filters_ovelray {
        opacity: 0;
        transform: scale(0);
        transition: opacity 0.2s ease-in-out;
    }
    #mobile_filters_ovelray.open {
        opacity: 1;
        transform: scale(1);
    }
    body.noscroll {
        overflow: hidden;
    }
</style>


<section id="mobile_filters_ovelray" class="w-screen h-screen backdrop-blur-sm  bg-white/30 fixed top-0 left-0 z-[1]"></section>
<section id="mobile_filters_panel" style="box-shadow:  10px 0 15px -3px rgba(0, 0, 0, 0.1), -4px 0 6px -2px rgba(0, 0, 0, 0.05)" class="min-h-screen bg-white w-4/5 fixed z-[2] top-0 left-0 pt-[64px]">
    <div class="pt-8">
        {% if type starts with 'schede_tecniche_laptop' %}
            {% include "templates/components/prodotti/finder/sidebar-filters-laptop.twig" %}
        {% elseif type starts with 'schede_tecniche_smartwatch' %}
            {% include "templates/components/prodotti/finder/sidebar-filters-smartwatch.twig" %}
        {% else %}  
            {% include "templates/components/prodotti/finder/sidebar-filters.twig" %}
        {% endif %}
    </div>
</section>



<script>
    
    let toggle = document.getElementById('toggle_filters');

    toggle.addEventListener('click', togglePanel);
    window.addEventListener('results-updated', togglePanel);
    window.addEventListener('filter-updated', closePanel);


    function togglePanel() {
        const panel   = document.getElementById('mobile_filters_panel');
        const overlay = document.getElementById('mobile_filters_ovelray');
        panel.classList.toggle('open');
        overlay.classList.toggle('open');
        document.body.classList.toggle('noscroll');
    }

    function closePanel() {
        const panel   = document.getElementById('mobile_filters_panel');
        const overlay = document.getElementById('mobile_filters_ovelray');
        panel.classList.remove('open');
        overlay.classList.remove('open');
        document.body.classList.remove('noscroll');
    }
</script>