//----------------------------------
//
//**
// *
// * @authors liwb(lwbhtml@163.com)
// * @date    2017/7/3 16:59
// * @version @
// * @desc 绘制三角形  http://lugolabs.com/caret
// * @param {String} $position
// * @param {Number} $caret-width 三角形外宽度
// * @param {Number} $border-width 三角形内宽度
// * @param {String} $direction 三角形方向
// * @param {String} $border-color 边框颜色
// * @param {String} $background-color 背景颜色
// */
//----------------------------------

.caret(@position, @caret-width, @border-width, @direction, @border-color, @background-color){
  position: relative;

  &:before,
  &:after {
    content:"";
    position: absolute;
  }
  // top
  & when (@direction = top) {
    &:before {
      top:0;
      left: 0;
      border-bottom: @caret-width solid @border-color;
      border-left: @caret-width solid transparent;
      border-right: @caret-width solid transparent;
    }
    &:after {
      left: @border-width;
      top: @border-width;
      border-bottom: (@caret-width - @border-width) solid @background-color;
      border-left: (@caret-width - @border-width) solid transparent;
      border-right: (@caret-width - @border-width) solid transparent;
    }
  }

  // right
  & when (@direction = right) {
    &:before {
      top:0;
      left: 0;
      border-left: @caret-width solid @border-color;
      border-top: @caret-width solid transparent;
      border-bottom: @caret-width solid transparent;
    }
    &:after {
      left: 0;
      top: @border-width;
      border-left: (@caret-width - @border-width) solid @background-color;
      border-top: (@caret-width - @border-width) solid transparent;
      border-bottom: (@caret-width - @border-width) solid transparent;
    }
  }

  //  bottom
  & when (@direction = bottom) {
    &:before {
      top:0;
      left: 0;
      border-top: @caret-width solid @border-color;
      border-left: @caret-width solid transparent;
      border-right: @caret-width solid transparent;
    }
    &:after {
      left: @border-width;
      top: 0;
      border-top: (@caret-width - @border-width) solid @background-color;
      border-left: (@caret-width - @border-width) solid transparent;
      border-right: (@caret-width - @border-width) solid transparent;
    }
  }

  // left
  & when (@direction = left) {
    &:before {
      top:0;
      left: 0;
      border-right: @caret-width solid @border-color;
      border-top: @caret-width solid transparent;
      border-bottom: @caret-width solid transparent;
    }
    &:after {
      left: @border-width;
      top: @border-width;
      border-right: (@caret-width - @border-width) solid @background-color;
      border-top: (@caret-width - @border-width) solid transparent;
      border-bottom: (@caret-width - @border-width) solid transparent;
    }
  }
}