{% set colors = [
  {'name': 'red', 'hex': 'FFDCDC'}, 
  {'name': 'green', 'hex': 'B7FFB0'}, 
  {'name': 'blue', 'hex': '97AAFF'}, 
  {'name': 'yellow', 'hex': 'FEFF97'}, 
  {'name': 'violet', 'hex': 'D97EFF'}, 
  {'name': 'pink', 'hex': 'FF8DE1'}, 
  {'name': 'orange', 'hex': 'FFCE8D'}, 
  {'name': 'grey', 'hex': 'D6D6D6'}
] %}

{% for color in colors %}
.tableField .rowHighlighted_{{ color.name }} {
	background-color: #{{ color.hex }};
}
{% endfor %}

{% for color1 in colors %}
{%- for color2 in colors -%}
{%- if color1.name != color2.name -%}
.tableField .rowHighlighted_{{ color1.name }}_{{ color2.name }} {
	background-image: -moz-linear-gradient(-180deg, #{{ color1.hex }} 0%, #{{ color2.hex }} 25%, #{{ color1.hex }} 50%, #{{ color2.hex }} 75%, #{{ color1.hex }} 100%);
	background-image: -webkit-linear-gradient(-180deg, #{{ color1.hex }} 0%, #{{ color2.hex }} 25%, #{{ color1.hex }} 50%, #{{ color2.hex }} 75%, #{{ color1.hex }} 100%);
	background-image: linear-gradient(0deg, #FFDCDC 0%, #{{ color1.hex }} 0%, #{{ color2.hex }} 25%, #{{ color1.hex }} 50%, #{{ color2.hex }} 75%, #{{ color1.hex }} 100%);
}
{% endif %}
{% endfor %}


{% endfor %}

