import{Fragment as i,jsx as t,jsxs as l}from"react/jsx-runtime";import{memo as m}from"react";import{css as f}from"styled-components";import{Badge as g}from"@redocly/theme/components/Badge/Badge";import{styled as d}from"../../styled-components.js";function p({badges:e,children:s}){if(!e)return t(i,{children:s});const n=e.filter(({position:r})=>r==="before"),c=e.filter(({position:r})=>r==="after");return l(i,{children:[n.map(({name:r,color:o})=>t(a,{color:o,children:r},r)),s,c.map(({name:r,color:o})=>t(a,{color:o,children:r},r))]})}const B=m(p),a=d(g)`
  margin-left: 0;
  background-color: ${({color:e})=>e||"var(--color-info-base)"};
  ${({deprecated:e})=>e&&f`
      color: var(--badge-deprecated-text-color);
      background-color: var(--badge-deprecated-bg-color);
      border-radius: var(--badge-deprecated-border-radius);
    `};
`,w=d(a)`
  margin-left: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  padding: 0 var(--spacing-xxs);
  max-width: 80px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
`;export{B as CustomBadges,w as NavigationBadge,a as StyledBadge};
