/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { ref } from "lit/directives/ref.js";
import { keyed } from "lit/directives/keyed.js";
import { nothing, svg, html } from "lit";
import { safeClassMap } from "@arcgis/lumina";
const CSS = {
  arrow: "calcite-floating-ui-arrow",
  arrowStroke: "calcite-floating-ui-arrow__stroke"
};
const DEFAULTS = {
  width: 12,
  height: 6,
  strokeWidth: 1
};
const FloatingArrow = ({ floatingLayout, key, ref: ref$1 }) => {
  const { width, height, strokeWidth } = DEFAULTS;
  const svgX = width / 2;
  const isVertical = floatingLayout === "vertical";
  const dValue = `M0,0 H${width} L${width - svgX},${height} Q${svgX},${height} ${svgX},${height} Z`;
  return keyed(key, html`<svg aria-hidden=true class=${safeClassMap(CSS.arrow)} height=${width} viewBox=${`0 0 ${width} ${width + (!isVertical ? strokeWidth : 0)}`} width=${width + (isVertical ? strokeWidth : 0)} ${ref(ref$1)}>${svg`${svg`<path class=${safeClassMap(CSS.arrowStroke)} d=${dValue ?? nothing} fill=none stroke-width=${strokeWidth + 1} />` || ""}<path d=${dValue ?? nothing} stroke=none />`}</svg>`);
};
export {
  FloatingArrow as F
};
