import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { classNames } from "../utils/classNames.js";
const ExperimentalCodeInline = forwardRef(
  ({ className, children, ...props }, forwardedRef) => {
    const code = Array.isArray(children) ? children.join("") : String(children);
    return /* @__PURE__ */ jsx(
      "code",
      {
        ref: forwardedRef,
        className: classNames([
          `gds-code-inline rounded-4 border border-solar-900 bg-solar-1000 px-1.5 py-1
          font-mono text-solar-400 font-regular [overflow-wrap:anywhere] -:whitespace-pre-wrap
          ${/* Set the font size to a ratio of the surrounding text for aesthetic reasons, and use `align-top` to prevent messing with the line height */
          ""}
          align-top
          text-[calc(1em*var(--ratio))]
          leading-[1lh] ${/* This seems silly but it is necessary to "lock" the line height in case it is set to a unitless value */
          ""}
          [--parent-em:calc(1em/var(--ratio))]
          [--ratio:0.75]
          ${/* Adjust the position differently depending on the browser, for optimal alignment */
          ""}
          top-[calc((var(--parent-em)-1em)*0.25)]
          safari:top-[calc((var(--parent-em)-1em)*0.15)]
          firefox:top-[calc((var(--parent-em)-1em)*0.2)]
          firefox:pb-[3px]
          ${/* If inside a link, use different colors and ensure the underline of the link appears over the background and border */
          ""}
          in-link:-z-10
          in-link:border-space-1200
          in-link:bg-space-1400
          in-link:text-galactic-500`,
          className
        ]),
        ...props,
        children: code
      }
    );
  }
);
ExperimentalCodeInline.displayName = "ExperimentalCodeInline";
export {
  ExperimentalCodeInline
};
