//-----------------------------
//
// Arrow mixin
// ===========
//
// Allows creation of CSS-only directional arrows
//
// The following example turns the .el element into a 10px downward-facing
// arrow that inherits its color from the parent.
//
// .el {
//   @include arrow(10px, inherit, down);
// }
//
//-----------------------------

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

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

// @private mixin arrow-make
// Used with arrow-base($size) to create an arrow shape
@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;
}

// Arrow
// Shorthand mixin accessor for arrow-base() and arrow-make()
@mixin arrow($size: 10px, $color: inherit, $direction: down) {
    @include __arrow-base($size);
    @include __arrow-make($color, $direction);
}