import{jsx as _jsx}from"react/jsx-runtime";import styled,{css}from"styled-components";import{useLocation}from"react-router-dom";import{LinkIcon}from"@redocly/theme";import{encodeBackSlashes}from"../../utils";import{joinWithSeparator}from"../../services";import{constructFieldDeepFragment}from"../../services/history/helpers";import{ShareLink}from"./linkify";export function generateDeepLink(i,o){const e=i.deps.operation,r=constructFieldDeepFragment(i,o);if(!(null==e?void 0:e.id)&&!e.isCallback)return"#"+r.toLowerCase();const t=joinWithSeparator(e.href,joinWithSeparator(e.id,r),"#");return encodeBackSlashes(t.toLowerCase())}export const LinkToField=({to:i,className:o})=>{const e=i,r=useLocation(),t=null==e?void 0:e.split("#")[1],s=!!r&&r.hash===`#${t}`;return _jsx(ShareLinkToField,{ariaLabel:`link  to ${e}`,className:o,isActive:s,to:e,id:t})};export const ShareLinkToField=styled(ShareLink)`
  display: flex;
  ${LinkIcon} {
    visibility: hidden;
    cursor: pointer;
    background-color: var(--bg-color);
  }

  ${({isActive:i})=>i&&css`
      ${LinkIcon} {
        visibility: visible;
        opacity: 1;
      }
    `}
  :hover ${LinkIcon}, :focus ${LinkIcon} {
    visibility: visible;
    opacity: 1;
  }
`;
//# sourceMappingURL=LinkToField.js.map