@import "recipes/shape/polygon/triangle";

@mixin ui-helper-arrow($position: bottom, $width: 6px, $color: #fff)
{
    position: relative;

    &:after
    {
        @include ui-helper-arrow-element($position, $width, $color)
    }
}

@mixin ui-helper-arrow-element($position: bottom, $width: 6px, $color: #fff, $margin-side: auto, $margin: auto)
{
    position: absolute;
    
    display: block;
    content: "";
    width:0; height:0;

    $position-offset: 50%;
    @if ($margin-side == auto)
    {
        $margin: -#{$width};
        
    }
    @else
    {
        $position-offset: 0;
    }

    // vertical
    @if ($position == top)
    {
        top: -$width;
    }
    @if ($position == bottom)
    {
        bottom: -$width;
    }
    @if ($position == top or $position == bottom)
    {
        left: $position-offset;
        @if ($margin-side == center)
        {
            margin-left: $margin;
        }
        @else
        {
            margin-#{$margin-side}: $margin;
        }
    }

    @if ($position == left)
    {
        left: -$width;
    }
    @if ($position == right)
    {
        right: -$width;
    }
    @if ($position == left or $position == right)
    {
        top: $position-offset;
        @if ($margin-side == center)
        {
            margin-top: $margin;
        }
        @else
        {
            margin-#{$margin-side}: $margin;
        }
    }

    @include triangle($position, $width, 0, $color);
}