import*as r from"react";import a from"styled-components";import{CloseFilledIcon as p}from"@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon";import{WarningAltFilled as s}from"@redocly/theme/icons/WarningAltFilled/WarningAltFilled";import{CheckboxFilledIcon as m}from"@redocly/theme/icons/CheckboxFilledIcon/CheckboxFilledIcon";const o={Pass:{background:"--color-green-1",icon:"--color-green-6"},Warn:{background:"--color-carrot-1",icon:"--color-carrot-6"},Error:{background:"--color-raspberry-1",icon:"--color-raspberry-6"}},$=({uniqueErrors:e,uniqueWarnings:l,id:n})=>{const c=[];return e===0&&c.push(r.createElement(t,{key:`${n}-pass`,color:`var(${o.Pass.background})`},r.createElement(m,{size:"13px",color:`var(${o.Pass.icon})`}))),e>0&&c.push(r.createElement(t,{key:`${n}-error`,color:`var(${o.Error.background})`},r.createElement(p,{size:"12px",color:`var(${o.Error.icon})`}),r.createElement(i,{color:`var(${o.Error.icon})`},e))),l>0&&c.push(r.createElement(t,{key:`${n}-warning`,color:`var(${o.Warn.background})`},r.createElement(s,{size:"12px",color:`var(${o.Warn.icon})`}),r.createElement(i,{color:`var(${o.Warn.icon})`},l))),r.createElement(d,null,c)},d=a.div`
  display: flex;
  align-items: center;
  gap: 4px;
`,t=a.div`
  background-color: ${({color:e})=>e};
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  height: 20px;
`,i=a.span`
  color: ${({color:e})=>e};
  font-size: 12px;
  margin-left: 4px;
`;export{$ as LevelIndicator,o as SEVERITY_TO_COLOR_ICON};
