@import "tests";

@import "recipes/background";

div {
    width: 20em;
    height: 20em;

    cursor: pointer;
    background-color: #ccc;
    @include border-radius(50%);
    @include box-shadow(
        -3px -3px 10px 2px rgba(0,0,0,.3) inset,
        0 0 0 15px rgba(255, 255, 255, .6) inset,
        0 0 0 1px rgba(0,0,0,.5),
        2px 2px 10px rgba(0,0,0,.6)
    );
}

.background-blueprint-grid {
    @include background-blueprint-grid;
}

.background-noise {
    //background-color: #000;
    @include background-noise(
        //$intensity: .5,
        //$size: 200,
        //$monochrome: true,
        $opacity: .15
    );
}

.background-radial-overlay {
    @include background-radial-overlay;
}

.background-tartan {
    @include background-tartan;
}

.background-carbon-fiber {
    @include background-carbon-fiber;
}

.background-horizontal-stripes {
    @include background-stripes-straight;
}

.background-diagonal-stripes {
    @include background-diagonal-stripes;
}

.background-stripes-cicada {
    @include background-stripes-cicada;
}

.background-tablecloth {
    @include background-tablecloth;
}

.background-lined-paper {
    @include background-lined-paper;
}

.background-madras {
    @include background-madras;
}

.background-checkerboard {
    @include background-checkerboard;
}

.background-checkerboard-diagonal {
    @include background-checkerboard-diagonal;
}

.background-houndstooth {
    @include background-houndstooth;
}

.background-polka-dot {
    @include background-polka-dot;
}

// Gradients
$gradient-color: #CF714A;

.background-glossy {
    @include background-gradient($gradient-color, glossy);
}

.background-matte {
    @include background-gradient($gradient-color, matte);
}

.background-bevel {
    @include background-gradient($gradient-color, bevel);
}

.background-recessed {
    @include background-gradient($gradient-color, recessed);
}


// Caution! Mixing background noise with other gradients will output
// the same base64-encoded image for every vendor prefixed gradient syntax.
// Consider overlaying with a pseudo-element, or disabling specific vendor prefixes
.background-mixed {
    @include background-image(
        background_noise($size: 40),
        matte-gradient(rgba(yellow, .2)),
        glossy-gradient($gradient-color)
    );
}