// TRIANGLE MIXIN
// ==============================

@mixin triangle($size, $color, $direction) {
    height: 0;
    width: 0;

    $width: nth($size, 1);
    $height: nth($size, length($size));

    $width: $width / 2;
    $height: if(length($size) > 1, $height, $height/2);

    @if $direction == up {
        border-bottom: $height solid $color;
        border-left: $width solid transparent;
        border-right: $width solid transparent;

    } @else if $direction == right {
        border-left: $height solid $color;
        border-bottom: $width solid transparent;
        border-top: $width solid transparent;

    } @else if $direction == down {
        border-top: $height solid $color;
        border-left: $width solid transparent;
        border-right: $width solid transparent;

    } @else if $direction == left {
        border-right: $height solid $color;
        border-bottom: $width solid transparent;
        border-top: $width solid transparent;
    }
}