{% set paletteId = palette.fileSlug or page.fileSlug %}
{% set suffixes = ['-80', '', '-20'] %}

<wa-scoped class="palette-icon-host">
  <template>
    <link rel="stylesheet" href="/dist/styles/color/{{ paletteId }}.css">
    <link rel="stylesheet" href="/assets/styles/theme-icons.css">

    <div class="palette-icon" style="--hues: {{ hues|length }}; --suffixes: {{ suffixes|length }}">
      {% for hue in hues -%}
        {% set hueIndex = loop.index %}
        {% for suffix in suffixes -%}
          <div class="swatch"
               data-hue="{{ hue }}" data-suffix="{{ suffix }}"
               style="--color: var(--wa-color-{{ hue }}{{ suffix }}); grid-column: {{ hueIndex }}; grid-row: {{ loop.index }}">&nbsp;</div>
        {%- endfor %}
      {%- endfor %}
    </div>
  </template>
</wa-scoped>
