/**
 * Corner folded with pure CSS
 * 
 * Known support: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 9+.
 * IE8 is not supported because it not render properly box-shadow and
 * pseudo element should be selected with ::element and not :element
 * 
 * @thanks Nicolas Gallagher @necolas
 * @link http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/
 */

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

@mixin folded-corner (
    $position: top-right,
    $color: #ddd,
    $background-color: #fff,
    $width: 1em,
    $border-radius: .3em,
    $box-shadow: rgba(0, 0, 0, .3) 0 0 .6em)
{
    position: relative;
    overflow: hidden;

    &::before
    {
        @include pseudo-element;
        border-style: solid;

        @include box-shadow($box-shadow);

        @if ($position == 'top-right')
        {
            top: 0;
            right: 0;
            border-width: 0 $width $width 0;
            border-color: $color $background-color;
            @include border-radius(0 0 0 $border-radius);
        }
        @elseif ($position == 'top-left')
        {
            top: 0;
            left: 0;
            border-width: $width $width 0 0;
            border-color: $background-color $color;
            @include border-radius(0 0 $border-radius 0);
        }
        @elseif ($position == 'bottom-right')
        {
            bottom: 0;
            right: 0;
            border-width: 0 0 $width $width;
            border-color: $background-color $color;
            @include border-radius($border-radius 0 0 0);
        }
        @elseif ($position == 'bottom-left')
        {
            bottom: 0;
            left: 0;
            border-width: $width 0 0 $width;
            border-color: $color $background-color;
            @include border-radius(0 $border-radius 0 0);
        }
    }
}
