{# @description A wash between two palette colours. Needs invert at full opacity. #}
{# @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:select['faint', 'soft', 'full'] | default:"soft" | description:"How much of the block's own surface shows through. full 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 `full` needs `invert` on the block (#21).
{% endcomment %}
<c-vars from="primary" via to="secondary" direction="br" opacity="soft" class />
<div class="absolute inset-0 bg-gradient-to-{{ direction }} from-{{ from }} {% if via %}via-{{ via }}{% endif %} to-{{ to }}
            {% if opacity == 'faint' %}opacity-10{% elif opacity == 'full' %}opacity-100{% else %}opacity-20{% endif %}
            {{ class }}"></div>