//
// Generate top triangle style
//
// @param  length  width
// @param  length  height
// @param  hex     color
//
// .c-triangle-top {
//   _triangle-top(10px, 10px, #000);
// }
//
_triangle-top(width, height, color) {
  _square(0);
  border-style: solid;
  border-width: 0 (width / 2) height (width / 2);
  border-color: transparent transparent color transparent;
}

//
// Generate right triangle style
//
// @param  length  width
// @param  length  height
// @param  hex     color
//
// .c-triangle-right {
//   _triangle-right(10px, 10px, #000);
// }
//
_triangle-right(width, height, color) {
  _square(0);
  border-style: solid;
  border-width: (height / 2) 0 (height / 2) width;
  border-color: transparent transparent transparent color;
}

//
// Generate bottom triangle style
//
// @param  length  width
// @param  length  height
// @param  hex     color
//
// .c-triangle-bottom {
//   _triangle-bottom(10px, 10px, #000);
// }
//
_triangle-bottom(width, height, color) {
  _square(0);
  border-style: solid;
  border-width: height (width / 2) 0 (width / 2);
  border-color: color transparent transparent transparent;
}

//
// Generate left triangle style
//
// @param  length  width
// @param  length  height
// @param  hex     color
//
// .c-triangle-left {
//   _triangle-left(10px, 10px, #000);
// }
//
_triangle-left(width, height, color) {
  _square(0);
  border-style: solid;
  border-width: (height / 2) width (height / 2) 0;
  border-color: transparent color transparent transparent;
}