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

////
///
/// Blend Mixins Module
/// ===========================================================================
///
///
/// @group Blend
/// @author Scape Agency
/// @link https://hue.gl
/// @since 0.1.0 initial release
/// @todo None
/// @access public
///
////


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

@use "../functions" as *;
@use "../variables" as *;
@use "../maps" as *;


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


/// Gradient Mixin
/// ---------------------------------------------------------------------------
///
/// Mixin to create a CSS background gradient using color names from the `$hue` map.
///
/// @name gradient_bg
/// @param {String} $start_color_name - Name of the start color.
/// @param {String} $end_color_name - Name of the end color.
///
/// @example scss - Usage
///   .element {
///     @include gradient_bg('primary', 'secondary');
///   }
///
@mixin gradient_bg($start_color_name, $end_color_name) {
    background: linear-gradient(
        hue_color($start_color_name),
        hue_color($end_color_name)
    );
}


///
/// Color Blending Mixin
/// ---------------------------------------------------------------------------
///
/// Mixin to apply a blended background color using two color names from
/// the `$hue` map.
///
/// @name blend_colors
/// @param {String} $color1_name - First color name.
/// @param {String} $color2_name - Second color name.
/// @param {Number} $percentage [50%] - Blend ratio of the first color.
///
/// @example scss - Usage
///   .element {
///     @include blend_colors('red', 'blue', 30%);
///   }
///
@mixin blend_colors(
    $color1_name,
    $color2_name,
    $percentage: 50%
) {
    $color1: hue_color($color1_name);
    $color2: hue_color($color2_name);
    background-color: mix($color1, $color2, $percentage);
}