// Based on [Nicolas Gallagher's Pure CSS speech bubbles][1]
// I've only implemented a simple triangle with border that you can mix in and position.
// Definitely can do with some optimization.
// Works only on elements with relative positioning and overflow not hidden.
//
// [1]: http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html
//
//

=arrow($direction, $bg-color, $border-color, $border-width, $top, $left, $width: 10px)
  position: relative
  &:before
    content: "\00a0"
    // reduce the damage in FF3.0:
    display: block
    position: absolute
    width: 0
    height: 0
    top: $top
    left: $left
    bottom: auto
    border-width: floor($width / 2)
    border-style: solid
    @if $direction == "south"
      border-color: $border-color transparent transparent transparent
    @if $direction == "north"
      border-color: transparent transparent $border-color transparent
    @if $direction == "east"
      border-color: transparent transparent transparent $border-color
    @if $direction == "west"
      border-color: transparent $border-color transparent transparent
  // creates the smaller  triangle
  &:after
    content: "\00a0"
    display: block
    position: absolute
    width: 0
    height: 0
    @if $direction == "south"
      top: $top - $border-width
    @else if $direction == "north"
      top: $top + $border-width
    @else
      top: $top
    @if $direction == "east"
      left: $left - $border-width
    @else if $direction == "west"
      left: $left + $border-width
    @else
      left: $left
    bottom: auto
    border-width: floor($width / 2)
    border-style: solid
    @if $direction == "south"
      border-color: $bg-color transparent transparent transparent
    @if $direction == "north"
      border-color: transparent transparent $bg-color transparent
    @if $direction == "east"
      border-color: transparent transparent transparent $bg-color
    @if $direction == "west"
      border-color: transparent $bg-color transparent transparent
