@import "tests";

@import "recipes/shadow";

$background: #eee;

div
{
    width: 18em;
    height: 10em;
    margin: 5em auto;
    background: $background;
    border: 1px solid #ccc;

    p
    {
        padding: 3em 0;
        text-align: center;
    }
}

a.more
{
    display: block;
    width: 100px;
    margin: -50px auto 0;
}
/*
 * This is required is you want to apply some transform on the element using drop shadow
 */

//.drop-shadow-curled-corners,
.drop-shadow-curved-vt,
.drop-shadow-lifted-corners,
.drop-shadow-perspective,
{
    @include drop-shadow-transform-requirement($background);
    
    &:hover
    {
        @include transform(rotate(3deg));
    }
}

.drop-shadow-curled-corners
{
    @include drop-shadow-curled-corners;
}

.drop-shadow-curved-vt
{
    @include drop-shadow-curved;
}
/*
.drop-shadow-flying
{
    @include drop-shadow-flying;
}
*/
.drop-shadow-lifted-corners
{
    @include drop-shadow-lifted-corners;
}

.drop-shadow-perspective
{
    @include drop-shadow-perspective;
}

.drop-shadow-raised
{
    @include drop-shadow-raised;
}