<svg width="140" height="20" viewBox="0 0 140 20" xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="a" x2="0" y2="100%">
    <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
    <stop offset="1" stop-opacity=".1"/>
  </linearGradient>
  <mask id="m"><rect width="140" height="20" rx="{{ roundedPixels }}" fill="#FFF"/></mask>
  <g mask="url(#m)">
    <rect width="50" height="20" fill="#555"/>
    <rect width="30" height="20" fill="#dc0000" x="50"/>
    <rect width="30" height="20" fill="#fdc500" x="80"/>
    <rect width="30" height="20" fill="#20a8d8" x="110"/>
  </g>
  <g fill="#fff" text-anchor="start" font-family="sans-serif" font-size="11">
    <text x="6" y="15" fill="#000" opacity="0.25">policies</text>
    <text x="5" y="14">policies</text>
    <!-- Fail -->
    <text x="{{ 65 - (3 * fail|length) }}" y="15" fill="#000" opacity="0.25">{{ fail }}</text>
    <text x="{{ 64 - (3 * fail|length) }}" y="14">{{ fail }}</text>
    <!-- Warn -->
    <text x="{{ 95 - (3 * warn|length) }}" y="15" fill="#000" opacity="0.25">{{ warn }}</text>
    <text x="{{ 94 - (3 * warn|length) }}" y="14">{{ warn }}</text>
    <!-- Info -->
    <text x="{{ 125 - (3 * info|length) }}" y="15" fill="#000" opacity="0.25">{{ info }}</text>
    <text x="{{ 124 - (3 * info|length) }}" y="14">{{ info }}</text>
  </g>
</svg>
