SCSS/SASS Arrow Mixin

_arrow-mixin.scss

@mixin arrow-helper($arrow-size, $arrow-color, $margin, $offset, $side, $align) {
  @if $side == 'top' {
    border-bottom-color: $arrow-color;
    top: -2 * $arrow-size;
  }
  @if $side == 'bottom' {
    border-top-color: $arrow-color;
    bottom: -2 * $arrow-size;
  }
  @if $side == 'left' {
    border-right-color: $arrow-color;
    left: -2 * $arrow-size;
  }
  @if $side == 'right' {
    border-left-color: $arrow-color;
    right: -2 * $arrow-size;
  }
  @if $side == 'right' or $side == 'left' {
    @if $align == 'center' {
      top: 50%;
      margin-top: -$arrow-size;
    }
    @else if $align == 'top' {
      top: $margin + $offset;
    }
    @else if $align == 'bottom' {
      bottom: $margin;
    }
  }
  @if $side == 'bottom' or $side == 'top' {
    @if $align == 'center' {
      right: 50%;
      margin-right: -$arrow-size;
      margin-#{$side}: $offset;
    }
    @else if $align == 'left' {
      left: $margin;
    }
    @else if $align == 'right' {
      right: $margin;
    }
  }
}

@mixin arrow($side: 'right', $align: 'center', $size: 20px, $offset: 0, $color: #f6f6f6, $border-color: 'none', $border-size: 1px) {
  position: relative;
  $selector: '&:after, &:before';
  @if $border-color == 'none' {
    $selector: '&:after';
  }
  #{$selector} {
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    visibility: visible;
  }

  @if $border-color != 'none' {
    $offset: $offset + $border-size;
  }

  &:after {
    border-width: $size;
    @include arrow-helper($size, $color, $size, $offset, $side, $align);
    @content;
  }

  @if $border-color != 'none' {
    &:before {
      border-width: $border-size + $size;
      @include arrow-helper($size + $border-size, $border-color, $size - $border-size, $offset, $side, $align);
      @content;
    }
  }
}

index.html

<div class="box right-center">right center</div>
<div class="box left-center">left center</div>
<div class="box bottom-center">bottom center</div>
<div class="box top-center">top center</div>

index.scss

@import "./arrow-mixin";

.box {
  background-color: hotpink;
  border: 1px solid black;
  padding: 20px;
  margin: 20px;
  width: 200px;
  font-family: sans-serif;
}

.right-center {
  @include arrow($side: 'right', $align: 'center', $size: 5px, $color: hotpink, $border-color: black);
}

.left-center {
  @include arrow($side: 'left', $align: 'center', $size: 5px, $color: hotpink, $border-color: black);
}

.bottom-center {
  @include arrow($side: 'bottom', $align: 'center', $size: 5px, $color: hotpink, $border-color: black);
}

.top-center {
  @include arrow($side: 'top', $align: 'center', $size: 5px, $color: hotpink, $border-color: black);
}