Speech bubble compass mixin

_compass_speech_bubbles.sass

=speech-bubble($arrow-direction: bottom, $arrow-pos: 50%, $height: 60px, $width: 60px, $padding: 0, $arrow-width: 12px, $arrow-length: 12px, $color: #aaa, $bgcolor: #333, $border-radius: 4px, $content: '', $bg-img: '', $bg-size: auto, $stab: 8px, $positioned: false, $size: 'medium')
  $arrow-v: ''
  $arrow-h: ''
  $offset-direction: ''
  $offset-body: ''

  @if $arrow-direction == left or $arrow-direction == right
    $arrow-v: transparent
    $arrow-h: $bgcolor
    $offset-direction: top
    $offset-body: $height / 2
  @else
    $arrow-v: $bgcolor
    $arrow-h: transparent
    $offset-direction: left
    $offset-body: $width / 2

  @if(!$positioned)
    position: relative

  &::before, &::after
    position: absolute

  &::before
    content: $content
    #{opposite-position($arrow-direction)}: $stab - $height - $arrow-length
    #{$offset-direction}: 50%
    height: $height
    line-height: $height
    width: $width
    margin-#{$offset-direction}: -$offset-body
    padding: $padding
    font-size: $size
    text-align: center
    color: $color
    background: if($bg-img != "", $bgcolor $bg-img, $bgcolor)
    background-position: center center
    background-size: $bg-size
    background-repeat: no-repeat
    border-radius: $border-radius

  &::after
    content: ''
    #{opposite-position($arrow-direction)}: $stab - $arrow-length
    #{$offset-direction}: 50%
    display: block
    margin-#{$offset-direction}: - $arrow-width
    border-style: solid
    border-width: $arrow-length $arrow-width
    border-#{$arrow-direction}-width: 0
    border-color: $arrow-v $arrow-h