@use 'globals' as *;

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

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









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

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

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

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

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

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

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

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

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

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

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

    @include rtl {
        animation: presszone-international-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-international-content > <page-root> > .presszone-international-tab-panel...)
#presszone-international-content > *:has(.presszone-international-tab-panel--slide-right),
#presszone-international-content > *:has(.presszone-international-tab-panel--slide-left),
#presszone-international-content > .has-sliding-tab {
    animation: none !important;
}

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