<c-vars
    class=""
    variant=""
    position="top-right"
    :variantClasses="{
        'neutral': 'btn-neutral',
        'primary': 'btn-primary',
        'secondary': 'btn-secondary',
        'accent': 'btn-accent',
        'info': 'btn-info',
        'success': 'btn-success',
        'warning': 'btn-warning',
        'error': 'btn-error'
    }"
    :positionClasses="{
        'top-right': 'right-2 top-2',
        'top-left': 'left-2 top-2',
        'bottom-right': 'right-2 bottom-2',
        'bottom-left': 'left-2 bottom-2'
    }"
/>

<form method="dialog">
    <button
        class="btn btn-sm btn-circle btn-ghost absolute {% if position %}{{ positionClasses|get_item:position }}{% endif %} {% if variant %}{{ variantClasses|get_item:variant }}{% endif %} {{ class }}"
        {{ attrs }}
    >
        {% if slot %}
            {{ slot }}
        {% else %}
            ✕
        {% endif %}
    </button>
</form>
