{# @description A wash between two palette colours. Needs invert at an opacity of 1. #}
{# @prop from:select['primary', 'secondary', 'accent', 'neutral', 'base-100', 'base-200', 'base-300'] | default:"primary" | description:"The first stop" #}
{# @prop via:select['primary', 'secondary', 'accent', 'neutral', 'base-100', 'base-200', 'base-300'] | description:"An optional middle stop" #}
{# @prop to:select['primary', 'secondary', 'accent', 'neutral', 'base-100', 'base-200', 'base-300'] | default:"secondary" | description:"The last stop" #}
{# @prop direction:select['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'] | default:"br" | description:"Which way the wash runs" #}
{# @prop opacity:number | default:"0.2" | description:"How much of the wash shows over the block's own surface, from 0 to 1. 1 needs invert." #}
{# @prop class:text | description:"Extra classes on the layer" #}
{% comment %}
  Copy on a full-strength primary-to-secondary wash fails 4.5:1 on some daisyUI
  themes, so an opacity of 1 needs `invert` on the block (#21).
{% endcomment %}
<c-vars from="primary" via to="secondary" direction="br" opacity="0.2" class />
<div class="absolute inset-0 bg-gradient-to-{{ direction }} from-{{ from }} {% if via %}via-{{ via }}{% endif %} to-{{ to }}
            {{ class }}"
     style="opacity: {{ opacity|floatformat:'-3u'|default:'0.2' }}"></div>