// [name]-[alt]-[shape]-[outline]-[direction] - from FA4

// Down Arrow
.icon-arrow-down(@color: @global-text-color) {
  @thickness: 1px;
  @stop-1: calc(50% - @thickness / 2 - 0.5px);
  @stop-2: calc(50% - @thickness / 2);
  @stop-3: calc(50% + @thickness / 2);
  @stop-4: calc(50% + @thickness / 2 + 0.5px);
  @color-stops: transparent @stop-1, @color @stop-2, @color @stop-3, transparent @stop-4;
  background-image: linear-gradient(40deg, @color-stops), linear-gradient(-40deg, @color-stops);
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: 1% center, 99% center; // offsets improve merging of shapes
}

// Up Arrow
.icon-arrow-up(@color: @global-text-color) {
  .icon-arrow-down(@color);
  background-position: right center, left center;
}

// Times
// provide options to have a background color
.icon-x(@color: @global-text-color) {
  @thickness: 1px;
  @bg-size: calc(100% - 2px);
  @stop-1: calc(50% - @thickness / 2 - 0.5px);
  @stop-2: calc(50% - @thickness / 2);
  @stop-3: calc(50% + @thickness / 2);
  @stop-4: calc(50% + @thickness / 2 + 0.5px);
  @color-stops: transparent @stop-1, @color @stop-2, @color @stop-3, transparent @stop-4;
  background-image: linear-gradient(45deg, @color-stops), linear-gradient(-45deg, @color-stops);
  background-size: @bg-size @bg-size;
  background-repeat: no-repeat;
  background-position: center center;
}