/*
 * Toast primitive — pure CSS, no Tailwind, no @apply. Fase 3 of
 * docs/PRD-primitive-headless-dan-migrasi-vanilla.md.
 *
 * Lives under chrome/, not a separate directory — same constraint as
 * cart-sheet.css (see that file's header for the full explanation):
 * scripts/build-theme-css.mjs's chromeChunkNames() only scans
 * resources/css/chrome/, and a relative @import out to a sibling directory
 * doesn't resolve at build time either. This file is undecorated pure CSS
 * even though the directory name says "chrome".
 *
 * @layer chrome is not optional — see cart-sheet.css's header (PRD
 * Keputusan 2) for why dropping it silently breaks every theme's override.
 *
 * Class name (.eco-toast) is unchanged from the old Alpine-based toast
 * (resources/views/components/ecommerce/toast.blade.php, superseded by this
 * primitive) — PRD Keputusan 1.
 *
 * [data-open] replaces the old x-show/x-cloak mechanism (same pattern as
 * cart-sheet's backdrop/panel) — resources/js/primitives/toast.js toggles
 * this attribute. Transition values below reproduce Alpine's UNMODIFIED
 * `x-transition` default exactly — read from
 * node_modules/alpinejs/dist/module.esm.js's registerTransitionsFromHelper(),
 * not assumed: opacity 0→1 AND scale 0.95→1, BOTH DIRECTIONS use the same
 * cubic-bezier(0.4, 0.0, 0.2, 1) easing (there's no separate ease-in/
 * ease-out — a detail easy to get wrong from memory), but duration is
 * ASYMMETRIC — enter is 150ms, leave is 75ms (Alpine's own defaults, not a
 * design choice made here).
 */
@layer chrome {
    .eco-toast {
        position: fixed;
        inset-block-end: 1.5rem;
        inset-inline-start: 50%;
        transform: translateX(-50%) scale(0.95);
        z-index: 9999;
        background: var(--color-foreground, #17140f);
        color: var(--color-background, #fff);
        font-size: 0.875rem;
        padding-inline: 1rem;
        padding-block: 0.625rem;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        max-width: 24rem;
        text-align: center;
        opacity: 0;
        pointer-events: none;
        /* leave: 75ms — Alpine's durationOut default */
        transition: opacity 75ms cubic-bezier(0.4, 0.0, 0.2, 1),
                    transform 75ms cubic-bezier(0.4, 0.0, 0.2, 1);
    }
    .eco-toast[data-open] {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        pointer-events: auto;
        /* enter: 150ms — Alpine's durationIn default */
        transition-duration: 150ms;
    }
}