/**
 * @class Global_CSS
 */
 
@import "compass/css3/images";
 
$default-gradient: matte !default;
$support-for-original-webkit-gradients: false;
 
/**
 * Adds a background gradient into a specified selector.
 *
 *     @include background-gradient(#444, 'glossy');
 *
 * You can also use color-stops if you want full control of the gradient:
 *
 *     @include background-gradient(#444, color-stops(#333, #222, #111));
 *
 * @param {Color} $bg-color
 * The base color of the gradient.
 *
 * @param {String/List} [$type=matte]
 * The style of the gradient, one of five pre-defined options: matte, bevel, glossy, recessed, or linear:
 *
 *     @include background-gradient(red, 'glossy');
 *
 * It can also accept a list of color-stop values:;
 *
 *     @include background-gradient(black, color-stops(#333, #111, #000));
 *
 * Values 'flat' and 'none' will result in no gradient, just flat background-color
 *
 * @param {String} $direction
 * The direction of the gradient.
 */
@mixin background-gradient($bg-color, $type: $default-gradient, $direction: top, $contrast: 1) {
    $flat: $type == null or $type == none or $type == flat;
 
    @if $flat or ($bg-color == transparent) {
        background-color: $bg-color;
 
        @if $bg-color != null {
            // invoking this mixin with null, none, or flat as the $type parameter means 
            // "no gradient" so make sure we don't inherit one via the cascade 
            background-image: none;
        }
    }
 
    @if not ($flat or ($bg-color == transparent)) {
        @if type-of($type) == "list" {
            // Color stops provided - no $bg-color required 
            @include background-image(linear-gradient($direction, $type));
        } @else if $bg-color != transparent {
            // Named gradients 
            @if $bg-color == null {
                @warn '@background-gradient: $bg-color is required for named gradient "#{$type}"';
            } @else if $type == bevel {
                @include background-image(bevel-gradient($bg-color, $direction, $contrast));
            } @else if $type == glossy {
                @include background-image(glossy-gradient($bg-color, $direction, $contrast));
            } @else if $type == recessed {
                @include background-image(recessed-gradient($bg-color, $direction, $contrast));
            } @else if $type == linear {
                @include background-image(linear-gradient($direction, color_stops(lighten($bg-color, 5%), darken($bg-color, 10%))));
            } @else if $type == matte {
                @include background-image(matte-gradient($bg-color, $direction, $contrast));
            } @else {
                @warn '@background-gradient: invalid gradient name "#{$type}"';
            }
        }
    }
}
 
// These are functions so they can be combined together with background-image()// ie. @include background-image(background_noise(), glossy-gradient()); 
 
@function bevel-gradient($bg-color: $base-color, $direction: top, $contrast: 1) {
    @return linear-gradient($direction, color_stops( 
        lighten($bg-color, 15%), 
        lighten($bg-color, 8%) 30%, 
        $bg-color 65%, 
        darken($bg-color, 6%) 
    ));
}
 
@function glossy-gradient($bg-color: $base-color, $direction: top, $contrast: 1) {
    @return linear-gradient($direction, color_stops(lighten($bg-color, 15% * $contrast), lighten($bg-color, 5% * $contrast) 50%, $bg-color 51%, darken($bg-color, 5% * $contrast)));
}
 
@function recessed-gradient($bg-color: $base-color, $direction: top, $contrast: 1) {
    @return linear-gradient($direction, color_stops(darken($bg-color, 10% * $contrast), darken($bg-color, 5% * $contrast) 10%, $bg-color 65%, lighten($bg-color, .5% * $contrast)));
}
 
@function matte-gradient ( 
    $bg-color: $base-color, 
    $direction: top, 
    $contrast: 1 
) {
    @return linear-gradient( 
        $direction, 
        color_stops( 
            lighten($bg-color, 15% * $contrast), 
            lighten($bg-color, 5% * $contrast) 3%, 
            darken($bg-color, 5% * $contrast) 
        ) 
    );
}