////
///
/// Mask Effects Mixin Module
/// ===========================================================================
///
/// This module provides mixins for CSS mask effects including
/// gradient fades and radial masks.
///
/// @group Effects
/// @author Scape Agency
/// @link https://move.gl
/// @since 0.1.0 initial release
/// @access public
///
////


// ============================================================================
// Gradient Mask Mixins
// ============================================================================

///
/// Fade mask to bottom.
///
/// @param {Percentage} $solid [60%] - Percentage where solid color ends.
///
@mixin mask_fade_b($solid: 60%) {
    mask-image: linear-gradient(to bottom, black $solid, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black $solid, transparent 100%);
}

///
/// Fade mask to top.
///
/// @param {Percentage} $solid [60%] - Percentage where solid color ends.
///
@mixin mask_fade_t($solid: 60%) {
    mask-image: linear-gradient(to top, black $solid, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black $solid, transparent 100%);
}

///
/// Fade mask to left.
///
/// @param {Percentage} $solid [60%] - Percentage where solid color ends.
///
@mixin mask_fade_l($solid: 60%) {
    mask-image: linear-gradient(to left, black $solid, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, black $solid, transparent 100%);
}

///
/// Fade mask to right.
///
/// @param {Percentage} $solid [60%] - Percentage where solid color ends.
///
@mixin mask_fade_r($solid: 60%) {
    mask-image: linear-gradient(to right, black $solid, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black $solid, transparent 100%);
}


// ============================================================================
// Radial Mask Mixins
// ============================================================================

///
/// Radial mask (circular vignette).
///
/// @param {Percentage} $solid [50%] - Percentage where solid color ends.
///
@mixin mask_radial($solid: 50%) {
    mask-image: radial-gradient(circle, black $solid, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, black $solid, transparent 100%);
}