<!-- Button Element -->
<QuixTemplate id="button-template">
  <QuixHtml>
    {% set id = field('id') %}
{% set class = field('class') %}

{% set text = field('text') %}
{% set link = field('link') %}
{% set type = field('type') %}
{% set outline = field('outline') %}
{% set btnClass = 'qx-btn qx-btn-' ~ type %}

{% set classes = classNames('qx-element qx-element-button-v2', class) %}
{% set animation = "" %}

{% if field('animation') != 'none' %}

    {% if field('animation')is not empty %}
        {% set animation = "cls:" ~ field('animation') ~ ";" %}
    {% endif %}

    {# repeat #}
    {% if field('animation_repeat') %}
        {% set animation = animation ~ "repeat:ture;" %}
    {% endif %}

    {# delay #}
    {% if field('animation_delay').value %}
        {% set animation = animation ~ "delay:" ~ field('animation_delay').value %}
    {% endif %}
{% endif %}

{% if outline %}
  {% set btnClass = 'qx-btn qx-btn-outline-' ~ type %}
{% endif %}

{% if field('full_width') %}
  {% set btnClass = btnClass ~ ' qx-btn-block' %}
{% endif %}

<div id="{{ id }}" class="{{ classes }}" qx-scrollspy="{{ animation }}">
  {{ field('text') | link(link, btnClass) }}
</div>  </QuixHtml>
  <QuixStyle>
    <!-- Global Style -->
    var style = Object.assign({}, Assets),
          id = "#{{ field("id") }}",
          css = "";
// margin
style.margin(id, {{ field("margin") | json_encode() }})

// padding 
style.padding(id, {{ field("padding") | json_encode() }})

// Z-Index
style.css(id, 'z-index', {{ field("zindex") | json_encode() }})

// background 
style.background (id, {{ field("background") | json_encode() }})

// border + box shadow 
style.border (id, {{ field("border") | json_encode() }})

// custom css 
style.raw ("{{ field("custom_css").code }}")
    <!-- Element Style -->
    {% include 'global.twig' %}

var id = "#{{ field("id") }}";

// Background > .qx-btn 
style.background (id + ' .qx-btn', {{ field("btn_background") | json_encode() }})

// Text Color
style.css( id + ' .qx-btn', 'color', {{ field('text_color') | json_encode() }});
// Hover Text color
style.css( id + ' .qx-btn:hover', 'color', {{ field('hover_text_color') | json_encode() }});

// typography
style.typography(id + ' *', {{ field('font') | json_encode() }});

// Alignment
style.alignment(id, {{ field('alignment') | json_encode() }});

// padding 
style.padding(id + ' .qx-btn', {{ field("btn_padding") | json_encode() }})

// -----------------------------
// Border 
// -----------------------------
// Border width > .qx-btn 
style.borderWidth( id + ' .qx-btn', {{ field('btn_border_width') | json_encode() }} );

// Border style > .qx-btn 
style.css( id + ' .qx-btn', 'border-style', {{ field('btn_border_type') | json_encode() }} );

// Border color > .qx-btn 
style.css( id + ' .qx-btn', 'border-color', {{ field('btn_border_color') | json_encode() }} );
style.css( id + ' .qx-btn:hover', 'border-color', {{ field('btn_hover_border_color') | json_encode() }} );

// Border radius > .qx-btn 
style.borderRadius( id + ' .qx-btn', {{ field('btn_border_radius') | json_encode() }} );
// -----------------------------
// Border 
// -----------------------------

style.load(id) 
  </QuixStyle>
</QuixTemplate>