@use 'globals' as *;

// =============================================================================
// Tab Slide Animations
// =============================================================================
// Directional slide transitions for tab content panels.
// Target parity with comments-press-zone.
// =============================================================================

// =============================================================================
// Directional Tab Slide Keyframes
// =============================================================================

@keyframes presszone-multilingual-tab-slide-in-from-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes presszone-multilingual-tab-slide-in-from-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes presszone-multilingual-tab-slide-out-left {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

@keyframes presszone-multilingual-tab-slide-out-right {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(30px);
    }
}

// =============================================================================
// Directional Slide Classes (BEM naming)
// Used by TabPanel component
// =============================================================================

// Forward navigation - content slides in from right
.presszone-multilingual-tab-panel--slide-right {
    animation: presszone-multilingual-tab-slide-in-from-right $presszone-multilingual-tab-slide-duration $presszone-multilingual-tab-slide-easing forwards;

    @include rtl {
        animation: presszone-multilingual-tab-slide-in-from-left $presszone-multilingual-tab-slide-duration $presszone-multilingual-tab-slide-easing forwards;
    }

    @include reduced-motion {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

// Backward navigation - content slides in from left
.presszone-multilingual-tab-panel--slide-left {
    animation: presszone-multilingual-tab-slide-in-from-left $presszone-multilingual-tab-slide-duration $presszone-multilingual-tab-slide-easing forwards;

    @include rtl {
        animation: presszone-multilingual-tab-slide-in-from-right $presszone-multilingual-tab-slide-duration $presszone-multilingual-tab-slide-easing forwards;
    }

    @include reduced-motion {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

// Exit animations (reserved for crossfade transitions)
.presszone-multilingual-tab-panel--exit-left {
    animation: presszone-multilingual-tab-slide-out-left 0.2s ease-out forwards;

    @include rtl {
        animation: presszone-multilingual-tab-slide-out-right 0.2s ease-out forwards;
    }

    @include reduced-motion {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.presszone-multilingual-tab-panel--exit-right {
    animation: presszone-multilingual-tab-slide-out-right 0.2s ease-out forwards;

    @include rtl {
        animation: presszone-multilingual-tab-slide-out-left 0.2s ease-out forwards;
    }

    @include reduced-motion {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

// =============================================================================
// Animation Conflict Prevention
// =============================================================================

// When tabs slide, ONLY the tab slide animation should play.
// Suppress page/card/form animations inside sliding panels.

// Disable page-level entrance animation on the container holding the sliding panel.
// (Structure: #presszone-multilingual-content > <page-root> > .presszone-multilingual-tab-panel...)
#presszone-multilingual-content > *:has(.presszone-multilingual-tab-panel--slide-right),
#presszone-multilingual-content > *:has(.presszone-multilingual-tab-panel--slide-left),
#presszone-multilingual-content > .has-sliding-tab {
    animation: none !important;
}

.presszone-multilingual-tab-panel--slide-right,
.presszone-multilingual-tab-panel--slide-left {
    .presszone-multilingual-settings-card,
    .presszone-multilingual-widget,
    .presszone-multilingual-stat-card,
    .presszone-multilingual-form-group--animated,
    [class*="--stagger"],
    [class*="--animated"] {
        animation: none !important;
        animation-delay: 0s !important;
        opacity: 1 !important;
    }
}