// =============================================================================
// Tab Slide Animations (SCSS Version)
// =============================================================================
// Directional slide transitions for tab content panels.
// Used by Tabs component and modal tabs throughout the admin app.
// =============================================================================

// =============================================================================
// Animation Timing Variables
// =============================================================================

$presszone-comments-tab-slide-duration: 0.35s;
$presszone-comments-tab-slide-easing: cubic-bezier(0.34, 1.56, 0.64, 1);

// =============================================================================
// Slide Animations
// =============================================================================

@mixin slide-left-in {
    animation: slideLeftIn $presszone-comments-tab-slide-duration $presszone-comments-tab-slide-easing;
}

@mixin slide-right-in {
    animation: slideRightIn $presszone-comments-tab-slide-duration $presszone-comments-tab-slide-easing;
}

@mixin slide-left-out {
    animation: slideLeftOut $presszone-comments-tab-slide-duration $presszone-comments-tab-slide-easing;
}

@mixin slide-right-out {
    animation: slideRightOut $presszone-comments-tab-slide-duration $presszone-comments-tab-slide-easing;
}

// =============================================================================
// Keyframes
// =============================================================================

@keyframes slideLeftIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideRightIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideLeftOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes slideRightOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}