// =====================================
//@include arrow();
//with custom arguments
//@include arrow(up, 10px, #efefef);
// =====================================

@mixin triangle($direction: down, $size: 5px, $color: #555) {
    height: 0;
    width: 0;

    @if ($direction==left) {
        border-bottom: $size solid transparent;
        border-right: $size solid $color;
        border-top: $size solid transparent;
    }

    @else if ($direction==right) {
        border-bottom: $size solid transparent;
        border-left: $size solid $color;
        border-top: $size solid transparent;
    }

    @else if ($direction==down) {
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-top: $size solid $color;
    }

    @else {
        border-bottom: $size solid $color;
        border-left: $size solid transparent;
        border-right: $size solid transparent;
    }
}