=arrow_helper($arrowSize, $arrowColor, $margin, $side, $align)
  @if $side == "top"
    border-bottom-color: $arrowColor
    top: -2 * $arrowSize

  @if $side == "bottom"
    border-top-color: $arrowColor
    bottom: -2 * $arrowSize

  @if $side == "left"
    border-right-color: $arrowColor
    left: -2 * $arrowSize

  @if $side == "right"
    border-left-color: $arrowColor
    right: -2 * $arrowSize

  @if $side == "right" or $side == "left"
    @if $align == "center"
      top: 50%
      margin-top: -$arrowSize

    @else if $align == "top"
      top: $margin

    @else if $align == "bottom"
      bottom: $margin


  @if $side == "bottom" or $side == "top"
    @if $align == "center"
      right: 50%
      margin-right: -$arrowSize

    @else if $align == "left"
      left: $margin

    @else if $align == "right"
      right: $margin

=arrow($side: "right", $align: "center", $size: 20px, $margin: 0, $color: #f6f6f6, $borderColor: "none", $borderSize: 3px)
  $selector: "&:after, &:before"
  @if $borderColor == "none"
    $selector: "&:after"

  #{$selector}
    border: solid transparent
    content: " "
    height: 0
    width: 0
    position: absolute
    pointer-events: none
    visibility: visible

  &:after
    border-width: $size
    @include arrow_helper($size, $color, $margin, $side, $align)

  @if $borderColor != "none"
    &:before
      border-width: $borderSize + $size
      @include arrow_helper($size + $borderSize, $borderColor, $margin - $borderSize, $side, $align)