'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { useGDS } from "../hooks/index.js";
import { cn } from "../utils/index.js";
export function CodeInline({ className, children, ...props }) {
    useGDS();
    return (_jsx("span", { className: cn(`gds-code-inline root-inline u:font-mono u:text-size-inherit u:wrap-anywhere u:whitespace-pre-wrap u:text-code
        u:in-link:text-link-idle
        ${ /* If inside a link, ensure the underline of the link appears over the background and border by default */''}
        u:in-link:-z-10
        ${ /* Prevent messing with the line height (this needs to be set on the root _and_ on the inner element) */''}
        i:align-top`, className), children: _jsx("code", { className: `
          rounded-[max(--spacing(1),0.25em)] border border-code bg-code
          px-[calc(--spacing(1)+0.1em)]
          py-[calc(--spacing(0.5)+0.1em)]
          align-top
          ${ /* Set the font size to a ratio of the surrounding text for aesthetic reasons */''}
          text-[calc(1em*var(--ratio))]
          leading-lh ${ /* Prevent the font size change from affecting the line height, in case it is set to a unitless value (e.g. `leading-none`) */''}
          [--parent-em:calc(1em/var(--ratio))]
          [--ratio:0.75]
          ${ /* Adjust the position differently depending on the browser, for optimal alignment */''}
          not-firefox:top-[calc((var(--parent-em)-1em)*0.25)]
          firefox:pb-[calc(--spacing(0.25)+0.1em)]
          ${ /* If inside a link, use different colors and do not round the bottom corners on hover to match the underline */''}
          in-link:border-default
          in-link:bg-elevated
          in-link:transition-[border-radius]
          in-link-hover:rounded-b-none
          ${ /* Prevent incorrect alignment when empty */''}
          empty:after:content-nbsp
        `, ...props, children: children }) }));
}
//# sourceMappingURL=CodeInline.js.map