/**
 * @desc  绘制箭头 http://lugolabs.com/caret
 * @param $width
 * @param $border-width
 * @param $direction: top bottom left right
 * @param $background-color
 * @param $position 默认relative
 */
@mixin arrow($width, $border-width, $direction, $color, $background-color, $position: relative) {
    $map-direction: (
        top: bottom left right,
        bottom: top left right,
        left: right top bottom,
        right: left top bottom
    );
    @if not map-has-key($map-direction, $direction) {
        @error "arrow $direction 必须为：#{map-keys($map-direction)}";
    }
    $conf: map-get($map-direction, $direction);

    position: $position;
    &:before,
    &:after {
        content: "";
        position: absolute;
    }
    &:before {
        top: 0;
        left: 0;

        border-#{nth($conf, 1)}: $width solid $color;
        border-#{nth($conf, 2)}: $width solid transparent;
        border-#{nth($conf, 3)}: $width solid transparent;
    }
    &:after {
        border-#{nth($conf, 1)}: ($width - $border-width) solid $background-color;
        border-#{nth($conf, 2)}: ($width - $border-width) solid transparent;
        border-#{nth($conf, 3)}: ($width - $border-width) solid transparent;
        top: if($direction==bottom, 0, $border-width);
        left: if($direction==right, 0, $border-width);
    }
}