{#
  CELL BAR (#227) — a figure drawn as a bar under it, filling `cell.bar` percent
  of the cell. Both cells carry a width, or auto layout shares the row out; a
  zero bar emits only the remainder. A nested presentation table because the Word engine honours a
  td's `width` attribute and nothing else; the print engine reads only the CSS
  twin, and without it every bar on a sheet printed at one length (#320); `padding: 0 !important` inline
  beats the mobile rule that pads every `.data-table td`. A BarList (#320) names
  the fill's colour in `cell.bar_color`, and its left half sets `cell.reverse`
  to fill from the right.
#}
{% set fill = cell.bar_color or theme.palette.accent %}
<table role="presentation" class="cell-bar" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;"><tr>{% if cell.reverse and cell.bar < 100 %}<td width="{{ 100 - cell.bar }}%" style="width: {{ 100 - cell.bar }}%; height: {{ size.component.table_bar_height }}px; font-size: 0; line-height: 0; padding: 0 !important;"></td>{% endif %}{% if cell.bar > 0 %}<td width="{{ cell.bar }}%" style="width: {{ cell.bar }}%; background-color: {{ fill }}; height: {{ size.component.table_bar_height }}px; font-size: 0; line-height: 0; padding: 0 !important;"></td>{% endif %}{% if not cell.reverse and cell.bar < 100 %}<td width="{{ 100 - cell.bar }}%" style="width: {{ 100 - cell.bar }}%; height: {{ size.component.table_bar_height }}px; font-size: 0; line-height: 0; padding: 0 !important;"></td>{% endif %}</tr></table>