/**
 * Shape/Symbol/Diamond
 *
 * @todo add height support
 * 
 * @author Alexander Futekov
 * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
 */
@mixin diamond($width: 5em, $color: #000)
{
    $half-width: $width/2;
    border-style: solid;
    border-color: transparent transparent $color transparent;
    
    border-width: 0 $half-width $half-width $half-width;
    height: 0;
    width: $width;
    position: relative;
    margin: $half-width/5*2 0 $width 0;
    
    &:after
    {
        content: "";
        position: absolute;
        top: $half-width;
        left: -$half-width;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: $color transparent transparent transparent;
        border-width: $half-width/5*7 $width 0 $width;
    }
}