/// Returns a CSS arrow generated by border styles
///
/// @author David Annez
///
/// @param {Number} $width [20px]
///   Horizontal width of triangle
///
/// @param {Number} $height [20px]
///   Vertical height of triangle
///
/// @param {String} $direction [up]
///   Direction of tip of arrow
///
/// @param {Color} $color [false]
///   Color of triangle, if none specified inherits from font color of element

@mixin arrow($width: 20px, $height: 20px, $direction: "up", $color: false) {
  $border-style: solid;
  $direction: $direction + unquote("");

  @if $color {
    $border-style: solid $color;
  }

  width: 0;
  height: 0;
  // Right
  @if $direction == "right" {
    border-top: $height / 2 solid transparent;
    border-bottom: $height / 2 solid transparent;
    border-left: $width $border-style;
  }
  // Left
  @if $direction == "left" {
    border-top: $height / 2 solid transparent;
    border-right: $width $border-style;
    border-bottom: $height / 2 solid transparent;
  }
  // Up
  @if $direction == "up" or $direction == "top" {
    border-right: $width / 2 solid transparent;
    border-bottom: $height $border-style;
    border-left: $width / 2 solid transparent;
  }
  // Down
  @if $direction == "down" or $direction == "bottom" {
    border-top: $height $border-style;
    border-right: $width / 2 solid transparent;
    border-left: $width / 2 solid transparent;
  }
}