/*------------------------------------*\
	$arrow - arrow.less
\*------------------------------------*/
/* ------------------------ */
/* LESS mixin for CSS arrow */
/* ------------------------ */

/* Usage
 * .arrow(size, color, direction, left-offset, right-offset, border-size, border-color);
 */

/* Where
 * Size is the with of the arrow
 * Color is the color of the arrow (plain color required)
 * Direction is the orientation of the arrow (top, right, bottom, left)
 * Offset is the position of the arrow on its axis (px / em)
 * Border-size is the width of the border if there is one (optional; default "0")
 * Border-color is the color of the border if there is one (optional; default "inherit");
 */

/* Extra
 * Drop-shadows can be used on the element to create a shadow on the arrow as well
 */

.arrow(@size, @color, @direction, @left-offset, @right-offset, @border-size: 0, @border-color: inherit) {

  &:after,
  &:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    display: inline-block;
  }
}

.arrow(@size, @color, @direction, @left-offset, @right-offset, @border-size: 0, @border-color: inherit) when (@direction = top) {
  @m-size: @size + (@border-size+1);

  &:after {
    bottom: 100%;
    left: @left-offset + 1;
    right: @right-offset + 1;
    // margin-left: -@size;

    border-left: @size solid transparent;
    border-right: @size solid transparent;
    border-bottom: @size solid @color;
  }

  &:before {
    bottom: 100%;
    left: @left-offset;
    right: @right-offset;
    // margin-left: -@m-size;

    border-left: @m-size solid transparent;
    border-right: @m-size solid transparent;
    border-bottom: @m-size solid;
    border-bottom-color: @border-color;
  }
}

.arrow(@size, @color, @direction, @left-offset, @right-offset, @border-size: 0, @border-color: inherit) when (@direction = bottom) {
  @m-size: @size + (@border-size+1);

  &:after {
    top: 100%;
    left: @left-offset + 1;
    right: @right-offset + 1;
    // margin-left: -@size;

    border-left: @size solid transparent;
    border-right: @size solid transparent;
    border-top: @size solid @color;
  }

  &:before {
    top: 100%;
    left: @left-offset;
    right: @right-offset;
    // margin-left: -@m-size;
    border-left: @m-size solid transparent;
    border-right: @m-size solid transparent;
    border-top: @m-size solid;
    border-top-color: @border-color;
  }
}

.arrow(@size, @color, @direction, @left-offset, @border-size: 0, @border-color: inherit) when (@direction = right) {
  @m-size: @size + (@border-size+1);

  &:after {
    left: 100%;
    top: @left-offset;
    margin-top: -@size;

    border-top: @size solid transparent;
    border-bottom: @size solid transparent;
    border-left: @size solid @color;
  }
  &:before {
    left: 100%;
    top: @left-offset;
    margin-top: -@m-size;

    border-top: @m-size solid transparent;
    border-bottom: @m-size solid transparent;
    border-left: @m-size solid;
    border-left-color: @border-color;
  }
}

.arrow(@size, @color, @direction, @left-offset, @border-size: 0, @border-color: inherit) when (@direction = left) {
  @m-size: @size + (@border-size+1);

  &:after {
    right: 100%;
    top: @left-offset;
    margin-top: -@size;

    border-top: @size solid transparent;
    border-bottom: @size solid transparent;
    border-right: @size solid @color;
  }
  &:before {
    right: 100%;
    top: @left-offset;
    margin-top: -@m-size;

    border-top: @m-size solid transparent;
    border-bottom: @m-size solid transparent;
    border-right: @m-size solid;
    border-right-color: @border-color;
  }
}