/**
 *
 * Before compass 0.11.5, you need to add
 * Compass::BrowserSupport.add_support("repeating-linear-gradient", "webkit", "moz", "o", "ms")
 * To your configuration (config.rb)
 * @see https://github.com/chriseppstein/compass/issues/401
 *
 * @link http://lea.verou.me/css3patterns/#tartan
 *
 * @author Marta Armada http://swwweet.com/ for the original pattern
 * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx for the sass mixin
 */

@import "compass/css3/images";

@mixin background-tartan($background-color: hsl(2, 57%, 40%))
{
    $transparent: rgba(#fff, 0);
    
    background-color: $background-color;
    @include background-image(
        repeating-linear-gradient(
            $transparent,
            $transparent 50px,
            rgba(#000,.4) 50px,
            rgba(#000,.4) 53px,
            $transparent 53px,
            $transparent 63px,
            rgba(#000,.4) 63px,
            rgba(#000,.4) 66px,
            $transparent 66px,
            $transparent 116px,
            rgba(#000,.5) 116px,
            rgba(#000,.5) 166px,
            rgba(#fff,.2) 166px,
            rgba(#fff,.2) 169px,
            rgba(#000,.5) 169px,
            rgba(#000,.5) 179px,
            rgba(#fff,.2) 179px,
            rgba(#fff,.2) 182px,
            rgba(#000,.5) 182px,
            rgba(#000,.5) 232px,
            $transparent 232px
        ),
        repeating-linear-gradient(
            180deg,
            // same as above, just with 180deg
            $transparent,
            $transparent 50px,
            rgba(#000,.4) 50px,
            rgba(#000,.4) 53px,
            $transparent 53px,
            $transparent 63px,
            rgba(#000,.4) 63px,
            rgba(#000,.4) 66px,
            $transparent 66px,
            $transparent 116px,
            rgba(#000,.5) 116px,
            rgba(#000,.5) 166px,
            rgba(#fff,.2) 166px,
            rgba(#fff,.2) 169px,
            rgba(#000,.5) 169px,
            rgba(#000,.5) 179px,
            rgba(#fff,.2) 179px,
            rgba(#fff,.2) 182px,
            rgba(#000,.5) 182px,
            rgba(#000,.5) 232px,
            $transparent 232px
        ),
        repeating-linear-gradient(
            -35deg,
            $transparent,
            $transparent 2px,
            rgba(#000,.2) 2px,
            rgba(#000,.2) 3px,
            $transparent 3px,
            $transparent 5px,
            rgba(#000,.2) 5px
        )
    );
}