/**
 * 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 */