/**
 * Create general-purpose triangle-shaped elements. Great for dialog boxes and tooltips.
 *
 * @section Triangles
 */

/**
 * Style simple small triangles.
 *
 * @memberof Triangles
 * @group
 * @example
 * <div class='triangle--u triangle color-blue inline-block'></div>
 * <div class='triangle--r triangle color-green inline-block'></div>
 * <div class='triangle--d triangle color-orange inline-block'></div>
 * <div class='triangle--l triangle color-pink inline-block'></div>
 * @memberof Triangles
 */
.triangle {
  width: 12px !important;
  height: 12px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.triangle--u {
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-bottom: 9px solid currentColor !important;
}

.triangle--r {
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 9px solid currentColor !important;
}

.triangle--d {
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 9px solid currentColor !important;
}

.triangle--l {
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-right: 9px solid currentColor !important;
}
/** @endgroup */

/**
 * Style large triangles.
 *
 * @group
 * @example
 * <span class='triangle-l triangle-l--u color-blue inline-block'></span>
 * <span class='triangle-l triangle-l--r color-green inline-block'></span>
 * <span class='triangle-l triangle-l--d color-orange inline-block'></span>
 * <span class='triangle-l triangle-l--l color-pink inline-block'></span>
 * @memberof Triangles
 */
.triangle-l {
  width: 24px !important;
  height: 24px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.triangle-l--u {
  border-left: 12px solid transparent !important;
  border-right: 12px solid transparent !important;
  border-bottom: 18px solid currentColor !important;
}

.triangle-l--r {
  border-top: 12px solid transparent !important;
  border-bottom: 12px solid transparent !important;
  border-left: 18px solid currentColor !important;
}

.triangle-l--d {
  border-left: 12px solid transparent !important;
  border-right: 12px solid transparent !important;
  border-top: 18px solid currentColor !important;
}

.triangle-l--l {
  border-top: 12px solid transparent !important;
  border-bottom: 12px solid transparent !important;
  border-right: 18px solid currentColor !important;
}
/** @endgroup */