import{jsx as c}from"react/jsx-runtime";import{css as p}from"styled-components";import{useLocation as l}from"react-router-dom";import{LinkIcon as r}from"@redocly/theme/icons/LinkIcon/LinkIcon";import{encodeBackSlashes as m}from"../../utils/string.js";import{constructFieldDeepFragment as d,joinWithSeparator as n}from"../../services/history/helpers.js";import{ShareLink as f}from"./linkify.js";import{styled as h}from"../../styled-components.js";function F(i,s){const o=i.deps.operation,e=d(i,s);if(!o?.id&&!o.isCallback)return"#"+e.toLowerCase();const t=n(o.href,n(o.id,e),"#");return m(t.toLowerCase())}const S=({to:i,className:s})=>{const o=i,e=l(),t=o?.split("#")[1],a=e?e.hash===`#${t}`:!1;return c(k,{ariaLabel:`link  to ${o}`,className:s,isActive:a,to:o,id:t})},k=h(f)`
  display: flex;
  ${r} {
    visibility: hidden;
    cursor: pointer;
    background-color: var(--bg-color);
  }

  ${({isActive:i})=>i&&p`
      ${r} {
        visibility: visible;
        opacity: 1;
      }
    `}
  :hover ${r}, :focus ${r} {
    visibility: visible;
    opacity: 1;
  }
`;export{S as LinkToField,k as ShareLinkToField,F as generateDeepLink};
