import {
  Headline
} from "./chunk-4TFRLWCC.js";
import {
  select
} from "./chunk-YMNSXZ5D.js";
import {
  Icon
} from "./chunk-RWIZ7Q74.js";
import {
  __spreadProps,
  __spreadValues
} from "./chunk-CIGAQ47A.js";

// src/components/documentation/AnchorLinkHeader.tsx
import { useTheme } from "@emotion/react";
import styled from "@emotion/styled";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
var AnchorLinkHeader = (props) => {
  const theme = useTheme();
  return /* @__PURE__ */ jsx(StyledAnchorLinkHeader, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs(Headline, __spreadProps(__spreadValues({}, props), { children: [
    props.children,
    /* @__PURE__ */ jsx(
      IconWrapper,
      {
        name: "AnchorLink",
        color: props.color || theme.text,
        width: 0
      }
    )
  ] })) }));
};
var 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;
  }
`;
var 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);
  }
`;

export {
  AnchorLinkHeader
};
