<svg xmlns="http://www.w3.org/2000/svg" width="{{ left.width+config.left_pad  + right.width+config.right_pad + 5}}" height="20">
  <linearGradient id="smooth" x2="0" y2="100%">
    <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
    <stop offset="1" stop-opacity=".1"/>
  </linearGradient>
  <rect rx="{{ config.border_radius }}" width="{{ left.width+config.left_pad  + right.width+config.right_pad  }}" height="20" fill="{{ left.color }}"/>
  <rect rx="{{ config.border_radius }}" x="{{ left.width+config.left_pad+5  }}" width="{{ right.width+config.right_pad  }}" height="20" fill="{{ right.color }}"/>
  <rect x="{{ left.width+config.left_pad+5  }}" width="4" height="20" fill="{{ right.color }}"/>
  <rect rx="{{ config.border_radius }}" width="{{ left.width+config.left_pad  + right.width+config.right_pad +5 }}" height="20" fill="url(#smooth)"/>
  <g fill="#fff" text-anchor="middle" font-family="{{config.font_face}},Verdana,Geneva,sans-serif" font-size="{{config.font_size}}">
    <text x="{{ (left.width+config.left_pad) /2+1 }}" y="15" fill="#010101" fill-opacity=".3">{{ left.text }}</text>
    <text x="{{ (left.width+config.left_pad) /2+1 }}" y="14">{{ left.text }}</text>
    <text x="{{ (left.width+config.left_pad+5) + (right.width+config.right_pad) /2-1 }}" y="15" fill="#010101" fill-opacity=".3">{{ right.text }}</text>
    <text x="{{ (left.width+config.left_pad+5) + (right.width+config.right_pad) /2-1 }}" y="14">{{ right.text }}</text>
  </g>
</svg>
