SCSS arrows mixin with option to position

arrows.scss

// -----------------------------
// arrows
// -----------------------------

// $direction: top, left, right, bottom, top-left, top-right, bottom-left, bottom-right
// $color: hex, rgb or rbga
// $size: px or em
// $position: true or false - optional (move to overhanging centered edge, message box style)
// @example
// .element{
//   @include arrow(top, #000, 50px, true);
// }

@mixin arrow($direction, $color, $size, $position: false){
  display: block;
  height: 0;
  width: 0;

  @if $position == true {
    content: "";
    position: absolute;

    @if $direction == 'top' {
      top: auto;
      bottom: 100%;
      left: 50%;
      right: auto;
      margin: 0 0 0 (-$size);
    }
    @else if $direction == 'bottom' {
      top: auto;
      bottom: 50%;
      left: auto;
      right: 50%;
      margin:0 0 (-$size) 0;
    }
    @else if $direction == 'left' {
      top: 50%;
      bottom: auto;
      left: auto;
      right: 100%;
      margin:0 (-$size) 0 0;
    }
    @else if $direction == 'right' {
      top: 50%;
      bottom: auto;
      left: 100%;
      right: auto;
      margin:(-$size) 0 0 0;
    }
  }

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