@mixin arrow($direction: top, $size: 10px, $color: #ccc, $center: 50%, $margin: -1px, $pseudo: before, $position: relative){
  position: $position;
  border-color: $color;

  &:#{$pseudo} {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-color: $color;

    @if $direction == "right" {
      top: $center;
      left: 100%;
      margin-left: $margin;
      margin-top: $size * -1;
      border-top: $size solid transparent;
      border-bottom: $size solid transparent;
      border-left: $size solid $color;
      border-left-color: inherit;
    } @else if $direction == "down" {
      top: 100%;
      left: $center;
      margin-top: $margin;
      margin-left: $size * -1;
      border-left: $size solid transparent;
      border-right: $size solid transparent;
      border-top: $size solid $color;
      border-top-color: inherit;
    } @else if $direction == "left" {
      top: $center;
      right: 100%;
      margin-right: $margin;
      margin-top: $size * -1;
      border-top: $size solid transparent;
      border-bottom: $size solid transparent;
      border-right:$size solid $color;
      border-right-color: inherit;
    } @else {
      bottom: 100%;
      left: $center;
      margin-bottom: $margin;
      margin-left: $size * -1;
      border-left: $size solid transparent;
      border-right: $size solid transparent;
      border-bottom: $size solid $color;
      border-bottom-color: inherit;
    }
  }
}