{# Background colours must be applied outside 'a' tag #}

<div class="bg-app-layer-one bg-app-layer-three-hover dropdown-item">
    <a
        class="border-bottom fs--1 p-0 cursor-pointer text-app-default-text-color text-decoration-none"
        {% if link_url %}
            href="{{ link_url }}"
        {% elif x_link_url %}
            :href="{{ x_link_url }}"
        {% endif %}

        {% if x_click %}
            @click="{{ x_click }}"
        {% else %}
            @click="toggle_dropdown()"
        {% endif %}
    >
        {% block link_content %}
            <div class="px-3 py-2 text-nowrap {{ link_css }}">
                {% if link_icon %}
                    <i class="{{ link_icon }} pe-1"></i>
                {% endif %}

                {% if link_text %}
                    {{ link_text }}
                {% elif x_link_text %}
                    <span x-text="{{ x_link_text }}"></span>
                {% endif %}
            </div>
        {% endblock %}
    </a>
</div>
