<aside
    id="theme-cart-drawer"
    x-cloak
    x-show="cartOpen"
    x-trap="cartOpen"
    @click.outside="cartOpen = $event.target.closest('#alert') ? 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="theme-cart-drawer"
    data-turbo-cache="false">
    <div class="theme-cart-drawer__header">
        <h2>{{ 'cart.title'|trans() }} (<span class="cart-items-count">0</span>)</h2>
        <button type="button" @click="cartOpen = false" aria-label="{{ 'shop.close_modal'|trans }}">
            <svg aria-hidden="true" viewBox="0 0 25.34 25.34" focusable="false">
                <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="theme-cart-drawer__body">
        {{ component('cart:CartForm') }}
    </div>
</aside>
