{% if type == "link" %}
  <a
    {% attrs data_sacro_el href %}
    {% if external %}
      rel="noopener noreferrer"
      target="_blank"
    {% endif %}
{% else %}
  <button
    {% attrs data_sacro_el data_title disabled type=type|default:"button" id name value %}
    {% if x_bind %}x-bind="{{ x_bind }}"{% endif %}
{% endif %}

    class="
      inline-flex items-center justify-center rounded-md shadow-sm transition-buttons duration-200

      {% if small %}
        px-2 py-1 text-xs font-normal
      {% else %}
        px-4 py-2 text-sm font-medium
      {% endif %}

      {% if disabled %}
        cursor-not-allowed bg-slate-300 text-slate-800
      {% elif variant == "primary" %}
        bg-blue-600 text-white
        hover:bg-blue-700
        focus:bg-blue-700 focus:ring-blue-500 focus:ring-offset-white
      {% elif variant == "primary-outline" %}
        bg-transparent border border-blue-700 text-blue-700
        hover:bg-blue-100
        focus:bg-blue-100 focus:ring-blue-500 focus:ring-offset-white
      {% elif variant == "secondary" %}
        bg-slate-500 text-white
        hover:bg-slate-600
        focus:bg-slate-600 focus:ring-slate-500 focus:ring-offset-white
      {% elif variant == "secondary-outline" %}
        border border-slate-400/75 text-slate-700 !shadow-none
        hover:bg-slate-200
        focus:bg-slate-200 focus:ring-slate-500 focus:ring-offset-white
      {% elif variant == "danger" %}
        bg-bn-ribbon-600 text-white
        hover:bg-bn-ribbon-700
        focus:ring-bn-ribbon-500 focus:ring-offset-white
      {% elif variant == "danger-outline" %}
        bg-transparent border border-red-700 text-red-700
        hover:bg-red-100
        focus:bg-red-100 focus:ring-red-500 focus:ring-offset-white
      {% elif variant == "warning" %}
        bg-bn-flamenco-600 text-white
        hover:bg-bn-flamenco-700
        focus:ring-bn-flamenco-500 focus:ring-offset-white
      {% elif variant == "success" %}
        bg-green-600 text-white
        hover:bg-green-700
        focus:ring-green-500 focus:ring-offset-white
      {% elif variant == "success-outline" %}
        bg-transparent border border-green-700 text-green-700
        hover:bg-green-100
        focus:bg-green-100 focus:ring-green-500 focus:ring-offset-white
      {% endif %}

      {% if not disabled %}
        hover:shadow-lg
        focus:outline-none focus:ring-2 focus:ring-offset-2
      {% endif %}

      {% if tooltip %}
        relative group
      {% endif %}

      {{ class }}
    ">

      {{ children }}

{% if type == "link" %}
  </a>
{% else %}
  </button>
{% endif %}