<div>
    {% if position == 'top-left' %}
        {% set cssClasses = ['bc-bottom-[34px]', 'bc-left-[-198px]'] %}
        {% set triangleCssClasses = ['bc-bottom-[-10px]', 'bc-right-[10px]'] %}
    {% elseif position == 'bottom-left' %}
        {% set cssClasses = ['bc-top-[34px]', 'bc-left-[-198px]'] %}
        {% set triangleCssClasses = ['bc-rotate-180', 'bc-top-[-10px]', 'bc-right-[10px]'] %}
    {% elseif position == 'bottom-right' %}
        {% set cssClasses = ['bc-top-[34px]', 'bc-left-[-8px]'] %}
        {% set triangleCssClasses = ['bc-rotate-180', 'bc-top-[-10px]'] %}
    {% else %}
        {% set cssClasses = ['bc-bottom-[34px]', 'bc-left-[-8px]' ] %}
        {% set triangleCssClasses = ['bc-bottom-[-10px]'] %}
    {% endif %}

    <div class="bc-relative bc-group bc-flex bc-items-center">
        <button {% if dataAttribute is not empty %} {{ dataAttribute | raw }}{% endif %}
            type="button"
            class="bc-peer bc-text-gray-600 focus:bc-ring-2 focus:bc-ring-gray-300 bc-rounded-full bc-group">
            {% block icon %}{% endblock %}
        </button>
        <div
            class="brlbs-cmpnt-hint-text peer-focus:bc-block bc-z-10 peer-hover:bc-block bc-bg-gray-600 bc-hidden bc-mx-auto bc-container bc-w-[228px] bc-p-3 bc-shadow-md bc-rounded bc-absolute {{ cssClasses | join(' ') }}">
            <p class="bc-text-xs bc-text-white">{{ hint | raw }}</p>
            <svg class="bc-absolute bc-z-10 bc-drop-shadow-md {{ triangleCssClasses | join(' ') }}" width="16" height="10"
                 viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 10L0 0L16 1.41326e-06L8 10Z" fill="#4b5563"></path>
            </svg>
        </div>
    </div>
</div>
