/**
 * Shape/Polygon/Hexagon
 *
 * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
 */
@mixin hexagon($width: 100px, $height: 55px, $background-color: transparent)
{
    width: $width;
    height: $height/2;
    background-color: $background-color;
    position: relative;
    
    &:before,
    &:after
    {
        content: "";
        position: absolute;
        width: 0;
        height: 0;

        left: 0;
        
        border-left: $width/2 solid transparent;
        border-right: $width/2 solid transparent;
    }

        &:before
        {
            top: -$width/4;
            border-bottom: $width/4 solid $background-color;
        }

        &:after
        {
            bottom: -$width/4;
            border-top: $width/4 solid $background-color;
        }
}