.arrow(@pos, @size, @bg-color) {
	width: 0;
	height: 0;
	border: @size solid transparent;
	._abbor_el( @pos, @bg-color );
}

.arrowbox(@pos, @size, @bg-color, @offset:50%) {

	@after-margin: @size * -1px;
	
	position: relative;
	background: @bg-color;
	
	&:after,
	&:before {
		._abpos(@pos);
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}

	&:after {
		border-color: transparent;
		._abbor_el(@pos, @bg-color);
		border-width: @size;
		._abpos_el(@pos, @size, @offset);
		._abmar_el(@pos, @after-margin);
	}

}

.arrowbox(@pos, @size, @bg-color, @border-width, @border-color, @offset:50%) {

	@before-margin: (@size + round(@border-width * 1.41421356)) * -1px;
	
	.arrowbox(@pos, @size, @bg-color, @offset);
	
	border: @border-width solid @border-color;
	
	&:before {
		border-color: transparent;
		._abbor_el(@pos, @border-color);
		border-width: @before-margin * -1;
		._abpos_el(@pos, @size, @offset);
		._abmar_el(@pos, @before-margin);
	}

}

._abpos( @pos ) when ( @pos = left ) { right: 100%; }
._abpos( @pos ) when ( @pos = right ) { left: 100%; }
._abpos( @pos ) when ( @pos = up ) { bottom: 100%; }
._abpos( @pos ) when ( @pos = down ) { top: 100%; }

._abpos_el( @pos, @size, @offset ) when ( @offset = 0 ) and ( @pos = left ) { top: @size; }
._abpos_el( @pos, @size, @offset ) when ( @offset = 0 ) and ( @pos = right ) { top: @size; }
._abpos_el( @pos, @size, @offset ) when ( @offset = 0 ) and ( @pos = up ) { left: @size; }
._abpos_el( @pos, @size, @offset ) when ( @offset = 0 ) and ( @pos = down ) { left: @size; }

._abpos_el( @pos, @size, @offset ) when not ( @offset = 0 ) and not ( ispixel(@offset) ) and ( @pos = left ) { top: @offset; }
._abpos_el( @pos, @size, @offset ) when not ( @offset = 0 ) and not ( ispixel(@offset) ) and ( @pos = right ) { top: @offset; }
._abpos_el( @pos, @size, @offset ) when not ( @offset = 0 ) and not ( ispixel(@offset) ) and ( @pos = up ) { left: @offset; }
._abpos_el( @pos, @size, @offset ) when not ( @offset = 0 ) and not ( ispixel(@offset) ) and ( @pos = down ) { left: @offset; }

._abpos_el( @pos, @size, @offset ) when not ( @offset = 0 ) and ( ispixel(@offset) ) and ( @pos = left ) { top: @offset + @size; }
._abpos_el( @pos, @size, @offset ) when not ( @offset = 0 ) and ( ispixel(@offset) ) and ( @pos = right ) { top: @offset + @size; }
._abpos_el( @pos, @size, @offset ) when not ( @offset = 0 ) and ( ispixel(@offset) ) and ( @pos = up ) { left: @offset + @size; }
._abpos_el( @pos, @size, @offset ) when not ( @offset = 0 ) and ( ispixel(@offset) ) and ( @pos = down ) { left: @offset + @size; }

._abbor_el( @pos, @color ) when ( @pos = left ) { border-right-color: @color; }
._abbor_el( @pos, @color ) when ( @pos = right ) { border-left-color: @color; }
._abbor_el( @pos, @color ) when ( @pos = up ) { border-bottom-color: @color; }
._abbor_el( @pos, @color ) when ( @pos = down ) { border-top-color: @color; }

._abmar_el( @pos, @margin ) when ( @pos = left ) { margin-top: @margin; }
._abmar_el( @pos, @margin ) when ( @pos = right ) { margin-top: @margin; }
._abmar_el( @pos, @margin ) when ( @pos = up ) { margin-left: @margin; }
._abmar_el( @pos, @margin ) when ( @pos = down ) { margin-left: @margin; }
