/// Used to set up an arrow element
/// @access private
/// @group arrow
@mixin __arrow-base($size: 10px) {
    display: inline-block;
    width: 0;
    height: 0;

    $size: $size/2;
    border: $size solid transparent;
}

/// Used with arrow-base($size) to create an arrow shape
/// @access private
/// @group arrow
/// @todo abstract out direction to helper map
@mixin __arrow-make($color: inherit, $direction: down) {
    // Set up the direction
    @if $direction == down {
        $direction: "top";
    } @elseif $direction == up {
        $direction: "bottom";
    } @elseif $direction == left {
        $direction: "right";
    } @elseif $direction == right {
        $direction: "left";
    } @else {
        @warn "[@include arrow[-*](vars)] $direction can only accept the following values: up, down, left, right. Falling back to default (down)";
        $direction: "top";
    }

    border-#{$direction}-color: $color;
}

/// Allows creation of CSS-only directional arrows
/// Shorthand mixin accessor for arrow-base() and arrow-make()
/// @example scss - Turn the .el element into a 10px downward-facing arrow that inherits its color from the parent.
///  .el {
///    @include arrow(10px, inherit, down);
///  }
/// @access public
/// @group arrow
/// @param {number} $size [10px] - arglist of selctors to assert
/// @param {color} $color [inherit] - arrow color
/// @param {direction} $direction [down] - arrow direction
@mixin arrow($size: 10px, $color: inherit, $direction: down) {
    @include __arrow-base($size);
    @include __arrow-make($color, $direction);
}
