import{jsx as e}from"react/jsx-runtime";import{css as l}from"styled-components";import{Tooltip as h}from"@redocly/theme/components/Tooltip/Tooltip";import{styled as a}from"../../styled-components.js";import{getVisibleScopeLabel as b,isScopeTruncated as v}from"../../utils/security-scope.js";import{Tag as g}from"./styled.js";function k({className:i,text:r,maxChars:n=32,tip:s,ariaLabel:f,TagComponent:t=g,arrowPosition:u="center",compact:o=!1}){const c=b(r,n),d=s===void 0&&v(r,n)?r:s;return d?e(m,{$compact:o,children:e(h,{placement:"bottom",arrowPosition:u,tip:d,children:e(T,{role:"button",tabIndex:0,"aria-label":f??r,children:e(t,{className:i,children:e(p,{$compact:o,children:c})})})})}):e(m,{$compact:o,children:e(t,{className:i,children:e(p,{$compact:o,children:c})})})}const p=a.span`
  display: inline-flex;
  font-family: var(--font-family-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 16rem;
  color: var(--color-warm-grey-8);
  ${({$compact:i})=>!i&&l`
      &&& {
        font-size: var(--font-size-sm);
      }
    `}
`,T=a.span`
  cursor: default;

  &:focus-visible {
    outline: 1px solid var(--link-color-primary);
    border-radius: var(--border-radius-md);
  }
`,m=a.span`
  display: inline-block;
  vertical-align: baseline;
  line-height: var(--line-height-base);
  ${({$compact:i})=>i?l`
          margin: 0;
        `:l`
          margin: calc(var(--spacing-unit) / 2) var(--spacing-xxs) calc(var(--spacing-unit) / 2) 0;
          &:last-child {
            margin-right: 0;
          }
        `}
`;export{k as ScopeTagWithTooltip};
