"use client";
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { forwardRef } from "react";
import { ExperimentalIcon } from "./Icon.js";
import { ArrowUpRightInteractive } from "../icons/ArrowUpRightInteractive.js";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
import { ButtonOrLink } from "../atoms/ButtonOrLink/ButtonOrLink.js";
const ExperimentalLink = forwardRef(
  ({
    variant,
    iconBefore,
    iconAfter: passedIconAfter,
    href,
    target,
    className,
    style,
    children,
    ...props
  }, forwardedRef) => {
    const [propsPolyfillRef, propsPolyfillAttributes] = useCSSPropsPolyfill("link", { variant }, { forceEnable: true });
    const buttonOrLinkProps = href ? { href, target, ...props } : { asSpan: true, ...props };
    return /* @__PURE__ */ jsx(
      "span",
      {
        ref: propsPolyfillRef,
        className: classNames([
          `gds-link isolate
          -:if-prop-[variant=primary(color:theme(colors.galactic-500)),variant=secondary(color:theme(colors.current))]/link`,
          className
        ]),
        ...getCSSPropsAttributes("link", { variant }, style),
        ...propsPolyfillAttributes,
        children: /* @__PURE__ */ jsx(
          ButtonOrLink,
          {
            ref: forwardedRef,
            className: `
            group/link -mx-1 whitespace-nowrap rounded-4 px-1 py-0.5 transition
            hover:text-galactic-400
            active:text-galactic-600
            active:transition-none
            firefox:mx-0 ${/* Work around this Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1849469 */
            ""}
            nested-icon:top-[0.075em]
            nested-icon:inline-block
            nested-icon:leading-none ${/* Fix Chrome issue where the focus ring has a weird shape when a link with an icon is in a paragraph with a tall line height */
            ""}
            +:disabled:text-space-1000
            +:nested-icon:default-size-[1em] ${/* This is the default, but it prevents an ancestor from overriding it accidentally */
            ""}
          `,
            ...buttonOrLinkProps,
            children: ({ target: target2 }) => {
              const iconAfter = passedIconAfter !== void 0 ? passedIconAfter : target2 === "_blank" ? /* @__PURE__ */ jsx(ArrowUpRightInteractive, {}) : void 0;
              return /* @__PURE__ */ jsxs(Fragment, { children: [
                iconBefore ? /* @__PURE__ */ jsxs(Fragment, { children: [
                  /* @__PURE__ */ jsx(ExperimentalIcon, { alt: "", children: iconBefore }),
                  "⁠"
                ] }) : null,
                children ? /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: `
                      truncate whitespace-normal from-current to-current bg-right-bottom pb-0.5 duration-200
                      not-first:ms-[0.2em]
                      not-last:me-[0.2em]
                      group-not-focus-visible/link:bg-gradient-to-b
                      @prop-variant-primary/link:[background-size:0%_1px]
                      @prop-variant-primary/link:group-enabled/link:transition-[background-size]
                      @prop-variant-primary/link:group-enabled/link:group-hover/link:bg-left-bottom
                      @prop-variant-primary/link:group-enabled/link:group-hover/link:[background-size:100%_1px]
                      @prop-variant-primary/link:group-disabled/link:[background-size:100%_1px]
                      @prop-variant-secondary/link:[background-size:100%_1px]
                    `,
                    children
                  }
                ) : null,
                iconAfter ? /* @__PURE__ */ jsxs(Fragment, { children: [
                  "⁠",
                  /* @__PURE__ */ jsx(ExperimentalIcon, { alt: "", children: iconAfter })
                ] }) : null
              ] });
            }
          }
        )
      }
    );
  }
);
ExperimentalLink.displayName = "ExperimentalLink";
export {
  ExperimentalLink
};
