{% set paletteId = palette.fileSlug or page.fileSlug %}
{% set suffixes = ['-80', '', '-20'] %}
{% set width = 20 %}
{% set height = 12 %}
{% set height_core = 20 %}
{% set gap_x = 4 %}
{% set gap_y = 4 %}

{% set total_width = (width + gap_x) * hues|length %}
{% set total_height = (height + gap_y) * suffixes|length + (height_core - height) %}
<svg viewBox="0 0 {{ total_width }} {{ total_height }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
<style>
	@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});
	.palette-icon {
		height: 8ch;
	}
</style>

{% for hue in hues -%}
  {% set hueIndex = loop.index0 %}
  {% set y = 0 %}
  {% for suffix in suffixes -%}
    {% set swatch_height = height if suffix else height_core %}

    <rect x="{{ hueIndex * (width + gap_x) }}" y="{{ y }}"
	      width="{{ width }}" height="{{ swatch_height }}"
	      fill="var(--wa-color-{{ hue }}{{ suffix }})" rx="2" />
	{% set y = y + swatch_height + gap_y %}
  {%- endfor %}
{% endfor %}
</svg>
