{# @description Draws the words it wraps as an outline in one of the theme's colours, with nothing inside the letters. Headings only. #}
{# @prop variant:select['primary', 'secondary', 'accent', 'neutral', 'base-content'] | default:"base-content" | description:"The colour of the line" #}
{# @prop weight:number | default:"1.5" | description:"How thick the line is, in pixels" #}
{# @prop class:text | description:"Extra classes on the span" #}
{# @slot not the CSS — The words to outline #}
{% comment %}
  Only the fill is made transparent, so the stroke can take `currentColor` and
  follow the theme.
{% endcomment %}
<c-vars variant="base-content" weight="1.5" class />
<span class="dce:text-{{ variant }} dce:[-webkit-text-fill-color:transparent] dce:[-webkit-text-stroke-color:currentColor]
             dce:[-webkit-text-stroke-width:calc(var(--outline-weight,1.5)*1px)]
             {{ class }}"
      style="--outline-weight: {{ weight|floatformat:'-3u'|default:'1.5' }}"
      {{ attrs }}>{{ slot }}</span>