/**
 * Scotch tape effect with pure CSS
 * 
 * @thanks Nick La @nickla for original concept
 * @link http://webdesignerwall.com/tutorials/css3-image-styles
 * 
 * @author David Kaneda https://www.davidkaneda.com
 *
 */

@import "../shared/pseudo-element";

$tape-width: 60px !default;
$tape-height: 25px !default;
$tape-color: rgb(254,243,127) !default;
$tape-opacity: .4 !default;
$tape-angle: -2deg !default;

@mixin tape (
    $width: $tape-width,
    $height: $tape-height,
    $color: $tape-color,
    $opacity: $tape-opacity,
    $angle: $tape-angle
)
{
    overflow: visible;
    &:after {
        @include pseudo-element($width: $width, $height: $height);
        top: ceil(-$height/2);
        left: 50%;
        margin-left: -$width/2;

        border: solid 1px darken($color, 10);

        @include background-gradient(rgba($color, $opacity), $type: matte);
        @include rotate($angle);
        @include box-shadow(
            inset 0 1px 0 rgba(255,255,255,.3),
            0 1px 0 rgba(0,0,0,.2)
        )
    }
}