less css bordered arrow mixin

arrow.less

// requires element to have position defined
// example usaage =>
//   #arrow > .left(10px, #fff, 2px, rgba(0,0,0,0.6));

#arrow {

  .base(@size, @backgroundColor, @borderSize, @borderColor) {
    border: @borderSize solid @borderColor;
    &:after, &:before {
      bottom: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }
    &:after {
      border-width: @size;
    }
    &:before {
      border-width: @size + (@borderSize * 2);
    }
  }

  .top(@size, @backgroundColor: inherit, @borderSize: 0, @borderColor: inherit) {
    #arrow>.base(@size, @backgroundColor, @borderSize, @borderColor);
    &:after {
      margin-left: @size * -1;
      border-bottom-color: @backgroundColor;
      left: 50%;
      bottom: 100%;
    }
    &:before {
      margin-left: (@size + @borderSize + @borderSize) * -1;
      border-bottom-color: @borderColor;
      left: 50%;
      bottom: 100%;
    }
  }

  .right(@size, @backgroundColor: inherit, @borderSize: 0, @borderColor: inherit) {
    #arrow>.base(@size, @backgroundColor, @borderSize, @borderColor);
    &:after {
      margin-top: @size * -1;
      border-left-color: @backgroundColor;
      top: 50%;
      left: 100%;
    }
    &:before {
      margin-top: (@size + @borderSize + @borderSize) * -1;
      border-left-color: @borderColor;
      top: 50%;
      left: 100%;
    }
  }

  .bottom(@size, @backgroundColor: inherit, @borderSize: 0, @borderColor: inherit) {
    #arrow>.base(@size, @backgroundColor, @borderSize, @borderColor);
    &:after {
      margin-right: @size * -1;
      border-top-color: @backgroundColor;
      right: 50%;
      top: 100%;
    }
    &:before {
      margin-right: (@size + @borderSize + @borderSize) * -1;
      border-top-color: @borderColor;
      right: 50%;
      top: 100%;
    }
  }

  .left(@size, @backgroundColor: inherit, @borderSize: 0, @borderColor: inherit) {
    #arrow>.base(@size, @backgroundColor, @borderSize, @borderColor);
    &:after {
      margin-bottom: @size * -1;
      border-right-color: @backgroundColor;
      bottom: 50%;
      right: 100%;
    }
    &:before {
      margin-bottom: (@size + @borderSize + @borderSize) * -1;
      border-right-color: @borderColor;
      bottom: 50%;
      right: 100%;
    }
  }

}