import{jsx as a,Fragment as n,jsxs as c}from"react/jsx-runtime";import{memo as p}from"react";import{css as l}from"styled-components";import{Tag as f}from"@redocly/theme/components/Tag/Tag";import{GenericIcon as g}from"@redocly/theme/icons/GenericIcon/GenericIcon";import{Tooltip as x}from"@redocly/theme/components/Tooltip/Tooltip";import{styled as s}from"../../styled-components.js";function d({name:r,color:e,description:o,icon:t}){return a(x,{tip:o,placement:"top",disabled:!o,children:a(m,{color:e,icon:t&&a(g,{icon:t}),children:r})},r)}function h({badges:r,children:e}){if(!r)return a(n,{children:e});const o=r.filter(({position:i})=>i==="before"),t=r.filter(({position:i})=>i==="after");return c(n,{children:[o.map(d),e,t.map(d)]})}const _=p(h),m=s(f)`
  margin: 0;
  ${({deprecated:r})=>r&&l`
      color: var(--badge-deprecated-text-color);
      background-color: var(--badge-deprecated-bg-color);
      border-radius: var(--badge-deprecated-border-radius);
    `};

  svg {
    flex-shrink: 0;
  }
`,k=s(m)`
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  padding: 0 var(--spacing-xxs);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
`;export{_ as CustomBadges,k as NavigationBadge,m as StyledBadge};
