// ----------------------------------------------------------------------

  // Arrows / Triangles

 // ----------------------------------------------------------------------

 // example: @include arrow("left", #cccccc, 10);

@mixin arrow($direction, $color, $size) {
  $pxSize: $size + px;
  $remSize: ($size / 10) + rem;

  width: 0;
  height: 0;

  @if $direction == "left"{
    border-top: $pxSize solid transparent;
    border-right: $pxSize solid $color;
    border-bottom: $pxSize solid transparent;

    border-top: $remSize solid transparent;
    border-right: $remSize solid $color;
    border-bottom: $remSize solid transparent;
  }@else if $direction == "right"{
    border-top: $pxSize solid transparent;
    border-bottom: $pxSize solid transparent;
    border-left: $pxSize solid $color;

    border-top: $remSize solid transparent;
    border-bottom: $remSize solid transparent;
    border-left: $remSize solid $color;
  }@else if $direction == "up"{
    border-left: $pxSize solid transparent;
    border-right: $pxSize solid transparent;
    border-bottom: $pxSize solid $color;

    border-left: $remSize solid transparent;
    border-right: $remSize solid transparent;
    border-bottom: $remSize solid $color;
  }@else if $direction == "down"{
    border-left: $pxSize solid transparent;
    border-right: $pxSize solid transparent;
    border-top: $pxSize solid $color;

    border-left: $remSize solid transparent;
    border-right: $remSize solid transparent;
    border-top: $remSize solid $color;
  }

}