// ============================================================
//          Arrows                                  
// ----------------------------------------------------------

$arrow-size:            $arrow-size !default
$arrow-border:          1 !default
$border:                $arrow-size
$arrow:                 $arrow-size - $arrow-border

// CSS arrows!!! But... before you read on, you might want to grab a coffee...
// This mixin creates a CSS arrow on a given element. We can have the arrow
// appear in one of 12 locations, thus:
//       01    02    03
//    +------------------+
// 12 |                  | 04
//    |                  |
// 11 |                  | 05
//    |                  |
// 10 |                  | 06
//    +------------------+
//       09    08    07
// You pass this position in along with a desired arrow color and optional
// border color, for example:
// `@include arrow(top, left, red)`
// for just a single, red arrow, or:
// `@include arrow(bottom, center, red, black)`
// which will create a red triangle with a black border which sits at the bottom
// center of the element. Call the mixin thus:
//    .foo
//        background-color:#BADA55
//        border:1px solid #ACE
//        @include arrow(top, left, #BADA55, #ACE)

@mixin arrow($arrow-edge, $arrow-location, $arrow-color, $border-color: $arrow-color)

  @if $arrow-edge == top

    @extend %arrow--top

    &:before
      border-bottom-color: $border-color !important

    &:after
      border-bottom-color: $arrow-color !important

    @if $arrow-location == left
      @extend %arrow--left

    @if $arrow-location == center
      @extend %arrow--center

    @if $arrow-location == right
      @extend %arrow--right


  @if $arrow-edge == right

    @extend %arrow--far

    &:before
      border-left-color: $border-color !important

    &:after
      border-left-color: $arrow-color !important

    @if $arrow-location == top
      @extend %arrow--upper

    @if $arrow-location == center
      @extend %arrow--middle

    @if $arrow-location == bottom
      @extend %arrow--lower


  @if $arrow-edge == bottom

    @extend %arrow--bottom

    &:before
      border-top-color: $border-color!important

    &:after
      border-top-color: $arrow-color!important

    @if $arrow-location == left
      @extend %arrow--left

    @if $arrow-location == center
      @extend %arrow--center

    @if $arrow-location == right
      @extend %arrow--right


  @if $arrow-edge == left

    @extend %arrow--near

    &:before
      border-right-color: $border-color!important

    &:after
      border-right-color: $arrow-color!important

    @if $arrow-location == top
      @extend %arrow--upper

    @if $arrow-location == center
      @extend %arrow--middle

    @if $arrow-location == bottom
      @extend %arrow--lower

+route(style,base)

  // Forms the basis for any/all CSS arrows.

  %arrow
    position: relative

    &:before,
    &:after
      content: ""
      position: absolute
      border-collapse: separate
    
    &:before
      border: $border solid transparent
    
    &:after
      border: $arrow solid transparent

  // Define individual edges so we can combine what we need, when we need.

  %arrow-top
    @extend %arrow

    &:before,
    &:after
      bottom: 100%
    
  %arrow-upper
    @extend %arrow

    &:before
      top: $arrow
    
    &:after
      top: $border
    
  %arrow-middle
    @extend %arrow

    &:before,
    &:after
      top: 50%
      margin-top: -$border
    
    &:after
      margin-top: -$arrow
    
  %arrow-lower
    @extend %arrow

    &:before
      bottom: $arrow
    
    &:after
      bottom: $border
    
  %arrow-bottom
    @extend %arrow

    &:before,
    &:after
      top: 100%
    
  %arrow-near
    @extend %arrow

    &:before, &:after
      right: 100%
    
  %arrow-left
    @extend %arrow

    &:before
      left: $arrow
    
    &:after
      left: $border
    
  %arrow-center
    @extend %arrow

    &:before, &:after
      left: 50%
      margin-left: -$border
    
    &:after
      margin-left: -$arrow
    
  %arrow-right
    @extend %arrow

    &:before
      right: $arrow
    
    &:after
      right: $border
    
  %arrow-far
    @extend %arrow

    &:before,
    &:after
      left: 100%