// ============================================================================
// Poster
// ============================================================================

////
/// 
/// Slide Animations Mixin Module
/// ===========================================================================
/// 
/// This module ...
/// 
/// 
/// @group Animations
/// @author Scape Agency
/// @link https://move.gl
/// @since 0.1.0 initial release
/// @todo None
/// @access public
/// 
////


// ============================================================================
// Use
// ============================================================================

@use "../dev" as *;
@use "../variables" as *;
@use "../keyframes" as *;
@use "base" as *;


// ============================================================================
// Mixins
// ============================================================================





///
/// Slide Animation
/// Creates a sliding animation in a specified direction.
/// @name animate_slide
/// @param {String} $direction [left] - The direction in which the element slides (left, right).
/// @param {Number|String} $distance [100%] - The distance the element slides.
/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide animation.
/// @param {String} $timing_function [$animate_base_timing_function] - The timing function for the slide animation.
/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
///
@mixin animate_slide(
    $direction: left, 
    $distance: 100%, 
    $duration: $animate_base_duration, 
    $timing-function: $animate_base_timing_function, 
    $iteration-count: $animate_base_iteration_count
) {
    @include animate_base(
        animate_slide,
        $duration,
        $timing-function,
        $iteration-count,
    );

    $translate-value: if($direction == left, -1 * $distance, $distance);

    @keyframes animate_slide {
        0% { transform: translateX(0); }
        100% { transform: translateX($translate-value); }
    }
}


// Slide Up Animation
// ----------------------------------------------------------------------------

///
/// Slide Up Animation
/// Creates a slide up animation.
/// @name animate_slide_up
/// @param {Number|String} $distance [20px] - The distance the element slides up.
/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide up animation.
/// @param {String} $timing_function [ease-in-out] - The timing function for the slide up animation.
/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
///
@mixin animate_slide_up(
    $distance: 20px, 
    $duration: $animate_base_duration, 
    $timing_function: ease-in-out, 
    $iteration_count: $animate_base_iteration_count
) {
    @include animate_base(
        animate_slide_up,
        $duration,
        $timing_function,
        $iteration_count,
    );
    @keyframes animate_slide_up {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-$distance); }
    }
}


// Slide Down Animation
// ----------------------------------------------------------------------------

///
/// Slide Down Animation
/// Creates a slide down animation.
/// @name animate_slide_down
/// @param {Number|String} $distance [20px] - The distance the element slides down.
/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide down animation.
/// @param {String} $timing_function [ease-in-out] - The timing function for the slide down animation.
/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
///
@mixin animate_slide_down(
    $distance: 20px, 
    $duration: $animate_base_duration, 
    $timing_function: ease-in-out, 
    $iteration_count: $animate_base_iteration_count
) {
    @include animate_base(
        animate_slide_down,
        $duration,
        $timing_function,
        $iteration_count,
    );
    @keyframes animate_slide_down {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY($distance); }
    }
}


// Slide In Left Animation
// ----------------------------------------------------------------------------

///
/// Slide In Left Animation
/// Creates a slide in animation from the left.
/// @name animate_slide_in_left
/// @param {Number|String} $distance [100%] - The distance the element slides in from the left.
/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide in animation.
/// @param {String} $timing_function [ease-out] - The timing function for the slide in animation.
///
@mixin animate_slide_in_left(
    $distance: 100%,
    $duration:
    $animate_base_duration,
    $timing_function: ease-out
) {
    @include animate_base(
        animate_slide_in_left,
        $duration,
        $timing_function,
        1,
    );
    @keyframes animate_slide_in_left {
        0% { transform: translateX(-$distance); }
        100% { transform: translateX(0); }
    }
}


// Slide In Right Animation
// ----------------------------------------------------------------------------

///
/// Slide In Right Animation
/// Creates a slide in animation from the right.
/// @name animate_slide_in_right
/// @param {Number|String} $distance [100%] - The distance the element slides in from the right.
/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide in animation.
/// @param {String} $timing_function [ease-out] - The timing function for the slide in animation.
///
@mixin animate_slide_in_right(
    $distance: 100%,
    $duration: $animate_base_duration,
    $timing_function: ease-out
) {
    @include animate_base(
        animate_slide_in_right,
        $duration,
        $timing_function,
        1,
    );
    @keyframes animate_slide_in_right {
        0% { transform: translateX($distance); }
        100% { transform: translateX(0); }
    }
}

// Slide Out Left Animation:
// ----------------------------------------------------------------------------

///
/// Slide Out Left Animation
/// Creates a slide out animation to the left.
/// @name animate_slide_out_left
/// @param {Number|String} $distance [100%] - The distance the element slides out to the left.
/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide out animation.
/// @param {String} $timing_function [ease-in] - The timing function for the slide out animation.
///
@mixin animate_slide_out_left(
    $distance: 100%,
    $duration: $animate_base_duration,
    $timing_function: ease-in,
) {
    @include animate_base(
        animate_slide_out_left,
        $duration,
        $timing_function,
        1,
    );
    @keyframes animate_slide_out_left {
        0% { transform: translateX(0); }
        100% { transform: translateX(-$distance); }
    }
}




// Slide Out Right Animation:
// ----------------------------------------------------------------------------

///
/// Slide Out Right Animation
/// Creates a slide out animation to the right.
/// @name animate_slide_out_right
/// @param {Number|String} $distance [100%] - The distance the element slides out to the right.
/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide out animation.
/// @param {String} $timing_function [ease-in] - The timing function for the slide out animation.
///
@mixin animate_slide_out_right(
    $distance: 100%,
    $duration: $animate_base_duration,
    $timing_function: ease-in,
) {
    @include animate_base(
        animate_slide_out_right,
        $duration,
        $timing_function,
        1,
    );
    @keyframes animate_slide_out_right {
        0% { transform: translateX(0); }
        100% { transform: translateX($distance); }
    }
}




// Slide In Fade Animation
// ----------------------------------------------------------------------------

///
/// Slide In Fade Animation
/// Creates a sliding animation with a fade-in effect.
/// @name animate_slide_in_fade
/// @param {String} $direction [left] - The direction from which the element slides in.
/// @param {Number|String} $distance [100%] - The distance the element slides.
/// @param {Number|String} $duration [$animate_base_duration] - The duration of the slide in fade animation.
/// @param {String} $timing_function [ease-out] - The timing function for the slide in fade animation.
///
@mixin animate_slide_in_fade(
    $direction: left, 
    $distance: 100%, 
    $duration: $animate_base_duration, 
    $timing-function: ease-out
) {
    @include animate_base(
        animate_slide_in_fade,
        $duration,
        $timing-function,
        1,
    );

    // Calculate the translate value based on the direction
    $translate-value: if($direction == left, -1 * $distance, $distance);

    @keyframes animate_slide_in_fade {
        0% { 
            transform: translateX($translate-value); 
            opacity: 0; 
        }
        100% { 
            transform: translateX(0); 
            opacity: 1; 
        }
    }
}