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

    @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
        border-color: transparent;
        border-style: solid;
        border-width: $size / 2;

        @if $direction == up {
            border-bottom-color: $color;

        } @else if $direction == right {
            border-left-color: $color;

        } @else if $direction == down {
            border-top-color: $color;

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

        @if $direction == up-right {
            border-left: $size solid transparent;

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

        @if $direction == down-right {
            border-left: $size solid transparent;

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