"use client";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../../chunk-BN4qSVkS.cjs");
const require_utils_emotion = require("../../utils/emotion.cjs");
const require_components_Icon_Icon = require("../Icon/Icon.cjs");
const require_components_documentation_DocsHeadline = require("./DocsHeadline.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/components/documentation/AnchorLinkHeader.tsx
const AnchorLinkHeader = (props) => {
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StyledAnchorLinkHeader, {
		colorProp: props.color,
		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(require_components_documentation_DocsHeadline.DocsHeadline, {
			...props,
			children: [props.children, /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(IconWrapper, {
				name: "AnchorLink",
				color: props.color,
				width: 0
			})]
		})
	});
};
const IconWrapper = (0, _emotion_styled.default)(require_components_Icon_Icon.Icon)`
  width: 20px;
  opacity: 0;
  margin: 0 0 4px -20px;
  transform: translateX(-8px);
  transition:
    opacity 0.1s ease-out,
    transform 0.1s ease-out;

  svg {
    margin: 0;
  }
`;
const StyledAnchorLinkHeader = _emotion_styled.default.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;

  a {
    padding-right: 24px;
  }

  &:hover ${require_utils_emotion.select(IconWrapper)} {
    opacity: 1;
    transform: translateX(0px);
  }
`;
//#endregion
exports.AnchorLinkHeader = AnchorLinkHeader;
