{% with variant=variant|default:"line" width=width|default:"full" %}
<div class="bn-divider coffee-doodle-draw mx-auto my-8 flex items-center justify-center {% if width == "narrow" %}max-w-[200px]{% elif width == "wide" %}max-w-3xl{% else %}w-full{% endif %}{% if class %} {{ class }}{% endif %}" role="separator">
{% if variant == "ornament" or variant == "spacer-rule" %}
<span class="h-px flex-1 bg-border"></span>
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="26" viewBox="0 0 72 26" fill="none" stroke="hsl(var(--accent))" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" class="mx-4 shrink-0" aria-hidden="true">
	<ellipse cx="30" cy="13" rx="6" ry="9"></ellipse><path d="M30 4 L30 22"></path>
	<ellipse cx="42" cy="13" rx="6" ry="9"></ellipse><path d="M42 4 L42 22"></path>
	<path d="M4 13 L18 13"></path><path d="M54 13 L68 13"></path>
</svg>
<span class="h-px flex-1 bg-border"></span>
{% else %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 12" preserveAspectRatio="none" class="h-3 w-full" fill="none" stroke="hsl(var(--border))" stroke-width="2" stroke-linecap="round" aria-hidden="true">
	<path d="M2 7 Q 40 2 80 7 T 160 6 T 240 7 T 298 6"></path>
</svg>
{% endif %}
</div>
{% endwith %}