<aside
    x-cloak
    x-show="cartOpen"
    x-trap="cartOpen"
    @click.outside="cartOpen = false"
    x-transition:enter="transform transition ease-in-out duration-500"
    x-transition:enter-start="translate-x-full"
    x-transition:enter-end="translate-x-0"
    x-transition:leave="transform transition ease-in-out duration-500"
    x-transition:leave-start="translate-x-0"
    x-transition:leave-end="translate-x-full"
    class="bg-light fixed right-0 z-50 flex h-[calc(100vh-80px)] max-h-[calc(100svh-80px)] min-h-0 w-full translate-y-[80px] flex-col gap-2 overflow-hidden p-4 shadow-2xl sm:w-[380px]" data-turbo-cache="false">
    <div class="border-gold flex justify-between border-b-2 pb-2">
        <h2 class="sm:text-lg">{{ ('cart.title')|trans() }} (<span class="cart-items-count">0</span>)</h2>
        <button @click="cartOpen = false">
            <svg class="hover:text-gold w-3.5 cursor-pointer text-current" fill="none"
                 stroke="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.34 25.34">
                <path d="M25.12.22c-.29-.29-.77-.29-1.06,0l-11.39,11.39L1.63.57c-.29-.29-.77-.29-1.06,0s-.29.77,0,1.06l11.04,11.04L.22,24.06c-.29.29-.29.77,0,1.06.15.15.34.22.53.22s.38-.07.53-.22l11.39-11.39,11.04,11.04c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77,0-1.06l-11.04-11.04L25.12,1.28c.29-.29.29-.77,0-1.06Z"/>
            </svg>
        </button>
    </div>
    <div class="min-h-0 flex-1 overflow-hidden">
        {{ component('cart:CartForm') }}
    </div>
</aside>
