sass mixin for adding arrows to a div

gistfile1.sass

$defaultBorder: none

=arrow($direction, $size, $color, $border: $defaultBorder)
  position: relative
  border: $border

  &:after, &:before
    @if $direction == top
      bottom: 100%
    @else if $direction == right
      left: 100%
    @else if $direction == bottom
      top: 100%
    @else if $direction == left
      right: 100%

    border: solid transparent
    content: " "
    height: 0
    width: 0
    position: absolute
    pointer-events: none
  &:after
    @if $direction == top
      border-bottom-color: $color
      right: 50%
      margin-left: -$size - 6px
    @else if $direction == right
      border-left-color: $color
      bottom: 50%
      margin-top: -$size - 6px
    @else if $direction == bottom
      border-top-color: $color
      left: 50%
      margin-left: -$size - 6px
    @else if $direction == left
      border-right-color: $color
      top: 50%
      margin-top: -$size - 6px

    border-width: $size
    border-width: $size + 6px