/* ===== SlideInPanel Component ===== */
/*
 * Token-driven slide-in panel. Replaces TelerikAnimationContainer for the
 * WonByMe overlay (D33) and other slide-in patterns.
 *
 * Visibility is driven by a data-open attribute so consumers can apply
 * arbitrary wrapper styles via splat without colliding with our positioning.
 *
 * No external margin / gap / flex on the wrapper (Bingo-Template §1792).
 * Honors prefers-reduced-motion: transition collapses to instant.
 */

.ui-slidein-panel {
    z-index: var(--meb-z-win, 300);
    pointer-events: none;
    transition: transform var(--meb-anim-slidein, 300ms) ease-out;
}

.ui-slidein-panel[data-position="fixed"] {
    position: fixed;
}

.ui-slidein-panel[data-position="absolute"] {
    position: absolute;
}

/* Higher specificity (two attribute selectors) so it beats direction-only
   rules regardless of source order. */
.ui-slidein-panel[data-direction][data-open="true"] {
    transform: translate(0, 0);
    pointer-events: auto;
}

/* --- Direction: right (default) — slides in from the right edge --- */
/* translate uses 100% (panel-width) so it works under both fixed (viewport-
   width) and absolute (container-width) positioning without baking in vw. */
.ui-slidein-panel[data-direction="right"] {
    top: var(--slidein-top, 40%);
    inset-inline-start: 0;
    inset-inline-end: 0;
    transform: translateX(100%);
}

/* --- Direction: left --- */
.ui-slidein-panel[data-direction="left"] {
    top: var(--slidein-top, 40%);
    inset-inline-start: 0;
    inset-inline-end: 0;
    transform: translateX(-100%);
}

/* --- Direction: top --- */
.ui-slidein-panel[data-direction="top"] {
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    transform: translateY(-100%);
}

/* --- Direction: bottom --- */
.ui-slidein-panel[data-direction="bottom"] {
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    transform: translateY(100%);
}

@media (prefers-reduced-motion: reduce) {
    .ui-slidein-panel {
        transition: none;
    }
}