<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">

<t t-name="im_livechat.LivechatButton">
    <button
        part="openChatButton"
        t-if="isShown"
        class="btn o-livechat-LivechatButton p-3 d-flex justify-content-center align-items-center shadow rounded-circle "
        t-attf-style="color: {{livechatService.options.button_text_color}}; background-color: {{livechatService.options.button_background_color}};"
        t-ref="button"
        t-on-click="onClick"
        title="Drag to Move"
    >
        <i class="fa fa-commenting" style="font-size: 22px;"/>
        <div t-if="store.livechat_rule?.action === 'display_button_and_text'" class="o-livechat-LivechatButton-notification text-nowrap position-absolute bg-100 py-2 px-3 rounded" style="max-width: 75vw;" t-att-class="{'o-livechat-LivechatButton-animate': state.animateNotification}">
            <p class="m-0 text-dark text-truncate" t-esc="livechatService.options.button_text"/>
        </div>
    </button>
</t>

</templates>
