Speech bubble Sass mixin

_speech_bubble.sass

=speech_bubble($arrow_dir: left, $arrow_pos: 50%, $color: #efefef, $border_width: 2px, $border_color: #ccc)
  border-style: solid
  border-width: $border_width
  border-color: $border_color
  +border-radius
  background-color: $color
  position: relative
  overflow: visible

  $dir_x: right
  $dir_y: top
  @if $arrow_dir == top
    $dir_x: bottom
    $dir_y: left
  @else if $arrow_dir == right
    $dir_x: left
    $dir_y: top
  @else if $arrow_dir == bottom
    $dir_x: top
    $dir_y: left

  $default_arrow_width: 13px
  &:before, &:after
    content: ''
    width: 0
    height: 0
    border: solid transparent
    position: absolute
    #{$dir_x}: 100%
    #{$dir_y}: $arrow_pos
  &:before
    border-width: $default_arrow_width + $border_width
    border-#{$dir_x}-color: $border_color 
    margin-#{$dir_y}: ($default_arrow_width + ($border_width * 2)) * -1
  &:after
    border-width: $default_arrow_width
    border-#{$dir_x}-color: $color
    margin-#{$dir_y}: ($default_arrow_width + $border_width) * -1
    margin-#{$dir_x}: -1px