@props([
    'name',
    'id',
])

<div
    id="{{ $id }}"
    class="cchp-mega cchp-mega--rich hidden desktop:block"
    data-cchp-flyout="{{ $name }}"
    x-cloak
    x-show="dropdown === '{{ $name }}'"
    x-transition:enter="transition ease-out duration-200 origin-top"
    x-transition:enter-start="opacity-0 -translate-y-3"
    x-transition:enter-end="opacity-100 translate-y-0"
    x-transition:leave="transition ease-in duration-150 origin-top"
    x-transition:leave-start="opacity-100 translate-y-0"
    x-transition:leave-end="opacity-0 -translate-y-3"
    @mouseenter="openFlyout('{{ $name }}')"
    @mouseleave="closeFlyoutSoon()"
    @click.outside="closeFlyoutOutside($event, '{{ $name }}')"
>
    <div class="site-container">
        <div class="cchp-mega__panel">
            {{ $slot }}
        </div>
    </div>
</div>