/**
 * Checkerboard background pattern
 *
 * @link http://lea.verou.me/css3patterns/#checkerboard
 * @link http://lea.verou.me/css3patterns/#diagonal-checkerboard
 *
 * @author Lea Verou http://lea.verou.me/ for the original pattern
 * @author Mason Wendell mason@canarypromo.com @canarymason for the sass mixin
 */

@import "compass/css3/images";

@mixin background-checkerboard($bg-color: #eee, $box-color:  black, $size: 60px) {
    $transparent: rgba(black, 0);
    background-color: $bg-color;
    @include background-image(
        linear-gradient(
            45deg,
            $box-color 25%,
            $transparent 25%,
            $transparent 75%,
            $box-color 75%,
            $box-color
        ),
        linear-gradient(
            45deg,
            $box-color 25%,
            $transparent 25%,
            $transparent 75%,
            $box-color 75%,
            $box-color
        )
    );
    background-size: $size $size;
    background-position: 0 0, ($size / 2) ($size / 2);
}


@mixin background-checkerboard-diagonal($bg-color: #eee, $box-color:  black, $size: 60px) {
    $transparent: rgba(black, 0);
    background-color: $bg-color;
    @include background-image(
        linear-gradient(
            45deg,
            $box-color 25%,
            $transparent 25%,
            $transparent 75%,
            $box-color 75%,
            $box-color
        ),
        linear-gradient(
            -45deg,
            $box-color 25%,
            $transparent 25%,
            $transparent 75%,
            $box-color 75%,
            $box-color
        )
    );
    background-size:$size $size;
}