"use client";
import { select } from "../../utils/emotion.js";
import { Icon } from "../Icon/Icon.js";
import { DocsHeadline } from "./DocsHeadline.js";
import styled from "@emotion/styled";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
//#region src/components/documentation/AnchorLinkHeader.tsx
const AnchorLinkHeader = (props) => {
	return /* @__PURE__ */ jsx(StyledAnchorLinkHeader, {
		colorProp: props.color,
		children: /* @__PURE__ */ jsxs(DocsHeadline, {
			...props,
			children: [props.children, /* @__PURE__ */ jsx(IconWrapper, {
				name: "AnchorLink",
				color: props.color,
				width: 0
			})]
		})
	});
};
const IconWrapper = styled(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 = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  width: fit-content;

  a {
    padding-right: 24px;
  }

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