<div {{ attributes }}>
    {% if open %}
        <div class="modal-scroll-lock fixed inset-0 z-modal flex items-center justify-center p-4 md:p-6">
            <button
                type="button"
                class="absolute inset-0 bg-black/70 backdrop-blur-[3px]"
                aria-label="{{ 'shop.close_modal'|trans }}"
                data-action="live#action"
                data-live-action-param="close"
            ></button>

            <div
                id="{{ id }}"
                role="dialog"
                aria-modal="true"
                aria-labelledby="{{ id }}-title"
                class="relative z-10 flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden border border-secondary/40 bg-background shadow-[0_32px_80px_rgba(0,0,0,0.65)]"
            >
                <div class="flex items-start justify-between gap-4 border-b border-primary/12 px-6 py-5 md:px-8">
                    <div class="min-w-0">
                        <div id="{{ id }}-title" class="font-display text-[28px] leading-tight font-semibold [font-optical-sizing:auto] text-primary">
                            {{ title }}
                        </div>
                        {% if variantLabel %}
                            <div class="mt-2 font-label text-[11px] font-semibold uppercase tracking-[0.2em] text-secondary">
                                {{ variantLabel }}
                            </div>
                        {% endif %}
                    </div>
                    <button
                        type="button"
                        class="flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center text-[34px] leading-none text-primary/60 transition hover:text-primary"
                        aria-label="{{ 'shop.close_modal'|trans }}"
                        data-action="live#action"
                        data-live-action-param="close"
                    >
                        &times;
                    </button>
                </div>

                <div class="overflow-y-auto px-6 py-6 md:px-8 md:py-8">
                    {% if rules is not empty %}
                        <div class="space-y-3">
                            <div class="grid grid-cols-degressivity gap-4 border-b border-primary/12 pb-3 text-[10px] uppercase tracking-[0.18em] text-primary/65 sm:grid-cols-degressivity-sm">
                                <div>{{ 'shop.degressive_modal_quantity'|trans() }}</div>
                                <div>{{ 'shop.degressive_modal_price'|trans() }}</div>
                                <div class="hidden sm:block">{{ 'shop.degressive_modal_discount'|trans() }}</div>
                            </div>

                            {% for rule in rules %}
                                <div class="grid grid-cols-degressivity gap-4 border-b border-primary/10 pb-3 text-[15px] leading-6 text-primary/78 sm:grid-cols-degressivity-sm">
                                    <div>{{ rule.range_label }}</div>
                                    <div class="font-semibold text-primary">{{ rule.price_label }}</div>
                                    <div class="col-span-2 sm:col-span-1">{{ rule.detail_label }}</div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-[15px] leading-7 text-primary/78">{{ 'shop.degressive_modal_empty'|trans }}</div>
                    {% endif %}
                </div>
            </div>
        </div>
    {% endif %}
</div>
