/*
 * Canonical drawer motion.
 *
 * This preserves the checkout coupon drawer animation as the single source
 * of truth for every bottom drawer in the public and admin interfaces.
 */
:root {
    --drawer-motion-duration: 300ms;
    /* The original coupon drawer uses Tailwind's ease-out curve. */
    --drawer-motion-easing: cubic-bezier(0, 0, 0.2, 1);
}

.app-drawer {
    pointer-events: none;
}

.app-drawer.is-visible {
    pointer-events: auto;
}

.app-drawer-backdrop {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--drawer-motion-duration) var(--drawer-motion-easing) !important;
}

.app-drawer-sheet {
    pointer-events: auto;
    transform: translateY(100%);
    transition: transform var(--drawer-motion-duration) var(--drawer-motion-easing) !important;
}

.app-drawer.is-visible:not(.is-closing) > .app-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.app-drawer.is-open > .app-drawer-sheet {
    transform: translateY(0);
}

/* Notification panel: slides in from the right edge instead of the bottom */
.app-drawer-sheet[data-panel-kind="notifications"] {
    transform: translateX(calc(100% + 2rem));
}

.app-drawer.is-open > .app-drawer-sheet[data-panel-kind="notifications"] {
    transform: translateX(0);
}

/* Drawers intentionally keep the coupon motion even when another shell
 * applies a global reduced-motion rule. */
body.app-shell .app-drawer-sheet {
    transition: transform var(--drawer-motion-duration) var(--drawer-motion-easing) !important;
}
body.app-shell .app-drawer-backdrop {
    transition: opacity var(--drawer-motion-duration) var(--drawer-motion-easing) !important;
}