<div
    class="fixed inset-0 z-[80]"
    :class="cartOpen ? 'pointer-events-auto' : 'pointer-events-none'"
    x-cloak
>
    <div
        x-show="cartOpen"
        x-transition.opacity.duration.250ms
        class="absolute inset-0 z-0 bg-primary/25 backdrop-blur-[1px]"
        @click="closeCart()"
    ></div>

    <aside
        x-show="cartOpen"
        x-trap="cartOpen"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="translate-x-full"
        x-transition:enter-end="translate-x-0"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="translate-x-0"
        x-transition:leave-end="translate-x-full"
        class="pointer-events-auto relative z-10 ml-auto flex h-full w-full max-w-[420px] flex-col border-l border-primary/10 bg-white shadow-2xl"
        data-turbo-cache="false"
    >
        <div class="flex items-center justify-between border-b border-primary/10 bg-surface px-6 py-5">
            <div>
                <p class="font-label text-[12px] uppercase tracking-[0.18em] text-secondary">{{ 'theme.cart.kicker'|trans }}</p>
                <h2 class="mt-1 font-display text-[28px] font-semibold [font-optical-sizing:auto] text-primary">{{ 'theme.cart.title'|trans }}</h2>
            </div>

            <button type="button" class="inline-flex h-11 w-11 cursor-pointer items-center justify-center border border-primary/10 text-primary transition hover:bg-surface" aria-label="{{ 'theme.cart.close'|trans }}" @click="closeCart()">
                <span aria-hidden="true" class="material-symbols-outlined text-[20px]">close</span>
            </button>
        </div>

        <div class="min-h-0 flex-1 overflow-hidden px-6 py-6">
            {{ component('cart:CartForm') }}
        </div>
    </aside>
</div>
