SCSS Arrow Please!

_arrow_bx.scss

/* Coded by @passcod, MIT Licensed: passcod.mit-license.org
   Adapted from @shojberg's cssarrowplease.com
*/
@mixin arrow-box( $selector: ".arrow-box",
                  $position: "top",
                  $arrow_size: 10px,
                  $border_width: 2px,
                  $box_color: #333,
                  $border_color: #ccc) {
  
  // We need the inverse of the arrow's position
  // and while we're at it, we might as well just
  // make sure the input does nothing unepected.
  $inverse: "bottom";
  $sideway: "left";
  @if $position == "left" {
    $inverse: "right";
    $sideway: "top";
  } @else if $position == "bottom" {
    $inverse: "top";
    $sideway: "left";
  } @else if $position == "right" {
    $inverse: "left";
    $sideway: "top";
  } @else {
    $position: "top";
  }

  $border: false;
  $cumul: 0;
  @if $border_width > 0 {
    $border: true;
    $cumul: $arrow_size + round($border_width * 1.41421356); // cos(PI/4) * 2
  }


  #{$selector} {
    position: relative;
    background: $box_color;

    @if $border { border: $border_width solid $border_color; }

    // Need to be in content-box mode for this to work!
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
  }

  $ab: $selector + ":after";
  @if $border {
    $ab: $ab + ", " + $selector + ":before";
  }

  #{$ab} {
    #{$inverse}: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  #{$selector}:after {
    border-#{$inverse}-color: $box_color;
    border-width: $arrow_size;
    #{$sideway}: 50%;
    margin-#{$sideway}: -$arrow_size;
  }

  @if $border {
    #{$selector}:before {
      border-#{$inverse}-color: $border_color;
      border-width: $cumul;
      #{$sideway}: 50%;
      margin-#{$sideway}: -$cumul;
    }
  }
}