{# ----------------------------------------------------------------- #}
{% set reversed    = reversed|json_parse %}
{% set highlight   = highlight|json_parse %}

{# ----------------------------------------------------------------- #}
{# Force label and background if highlight or reversed are set. #}
{% if highlight is defined and highlight is same as (true) %}
    {% set backgroundClass  = 'bf-color-bg-highlight' %}
    {% set defaultLabel     = 'Highlight' %}
{% elseif reversed is defined and reversed is same as (true) %}
    {% set backgroundClass  = 'reversed bf-color-bg-ground' %}
    {% set defaultLabel     = 'Reversed' %}
    {% set highlightDefault = false %}
{% endif %}

{# ----------------------------------------------------------------- #}
<div class='d-flex flex-column flex-sm-row' style='height: 100vh'>

    <div class='flex-grow-1 d-flex flex-column justify-content-center align-items-center p-4 {{ backgroundClass }}'>
        {% include '@bf-components/button-nav/twig/index.twig' with {
            label   : label|default(defaultLabel)|default('Default')
        } %}
    </div>

    <div class='flex-grow-1 d-flex flex-column justify-content-center align-items-center p-4 {{ backgroundClass|default('reversed bf-color-bg-ground') }}'>
        {% include '@bf-components/button-nav/twig/index.twig' with {
            reversed    : reversed|default(true),
            label       : label|default(defaultLabel)|default('Reversed')
        } %}
    </div>

    <div class='flex-grow-1 d-flex flex-column justify-content-center align-items-center p-4 {{ backgroundClass|default('bf-color-bg-highlight') }}'>
        {% include '@bf-components/button-nav/twig/index.twig' with {
            highlight   : highlight|default(highlightDefault)|default(true),
            label       : label|default(defaultLabel)|default('Highlight')
        } %}
    </div>

</div>