"use client";
import { jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { useContext } from "react";
import { ButtonOrLinkContext } from "../../atoms/ButtonOrLink/ButtonOrLink.js";
import { buildTransition } from "../../tokens/utils.js";
import { Icon } from "../../atoms/Icon/Icon.js";
const linkArrowIconStyles = {
  pointerEvents: "none",
  // Don't change the tap area when the icon is translated
  transition: buildTransition("TRANSFORM"),
  '.gds-ButtonOrLink:not(:disabled, [aria-disabled="true"]):hover &': {
    "&.gds-Icon-ArrowLeft": {
      transform: "translateX(-20%)",
      "&:dir(rtl)": {
        transform: "translateX(20%)"
      }
    },
    "&.gds-Icon-ArrowRight": {
      transform: "translateX(20%)",
      "&:dir(rtl)": {
        transform: "translateX(-20%)"
      }
    },
    "&.gds-Icon-ArrowUpRight": {
      transform: "translate(20%, -20%)",
      "&:dir(rtl)": {
        transform: "translate(-20%, -20%)"
      }
    }
  }
};
const LinkArrowIcon = ({ external: passedExternal, ...props }) => {
  const ancestorButtonOrLink = useContext(ButtonOrLinkContext);
  const external = passedExternal ?? (ancestorButtonOrLink == null ? void 0 : ancestorButtonOrLink.target) === "_blank";
  const IconComponent = external ? Icon.ArrowUpRight : Icon.ArrowRight;
  return /* @__PURE__ */ jsx(IconComponent, { title: "", sx: linkArrowIconStyles, ...props });
};
LinkArrowIcon.isGdsIcon = true;
export {
  LinkArrowIcon,
  linkArrowIconStyles
};
