css arrow mixin with direction, border, and different nesting

css-arrow-mixin.scss

@mixin css-arrow($direction, $arrow-width, $arrow-height, $arrow-left-offset, $arrow-color, $arrow-border-color, $arrow-border-width, $arrow-type: container) {
  @if not index(top bottom, $direction) {
    @error "Direction must be either `top` or `bottom`.";
  }
  @if not index(container child, $arrow-type) {
    @error "Type must be either `container` or `child`. ";
  }

  $base-element: '&:before';
  @if $arrow-type == child { $base-element: '&' }

  #{$base-element}, &:after {
    content: '';
    position: absolute;
    display: block;
    #{$direction}: -$arrow-height;
    @if $arrow-type == container {
      left: $arrow-left-offset;
    }
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: ($arrow-width / 2);
    border-#{opposite-position($direction)}-width: $arrow-height;
    border-#{$direction}-width: 0;
    border-#{opposite-position($direction)}-color: $arrow-border-color; 
  }
  &:after {
    @if $arrow-type == container {
      #{$direction}: (-$arrow-height) + $arrow-border-width;
    } @else {
      #{$direction}: $arrow-border-width;
      left: -($arrow-width / 2);
    }
    border-#{opposite-position($direction)}-color: $arrow-color;
    border-width: ($arrow-width / 2) - $arrow-border-width;
    border-#{opposite-position($direction)}-width: ($arrow-height - $arrow-border-width);
    border-#{$direction}-width: 0;
    margin-left: $arrow-border-width;
  }
}