import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from 'react';
import { css } from 'styled-components';
import { Badge } from '@redocly/theme/components/Badge/Badge';
import { styled } from '../../styled-components.js';
function CustomBadgesComponent({ badges, children }) {
    if (!badges)
        return _jsx(_Fragment, { children: children });
    const badgesBefore = badges.filter(({ position }) => position === 'before');
    const badgesAfter = badges.filter(({ position }) => position === 'after');
    return (_jsxs(_Fragment, { children: [badgesBefore.map(({ name, color }) => (_jsx(StyledBadge, { color: color, children: name }, name))), children, badgesAfter.map(({ name, color }) => (_jsx(StyledBadge, { color: color, children: name }, name)))] }));
}
export const CustomBadges = memo(CustomBadgesComponent);
export const StyledBadge = styled(Badge) `
  margin-left: 0;
  background-color: ${({ color }) => color || 'var(--color-info-base)'};
  ${({ deprecated }) => deprecated &&
    css `
      color: var(--badge-deprecated-text-color);
      background-color: var(--badge-deprecated-bg-color);
      border-radius: var(--badge-deprecated-border-radius);
    `};
`;
export const NavigationBadge = styled(StyledBadge) `
  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;
`;
//# sourceMappingURL=Badges.js.map