{% set arrowClasses = [
    'btn',
    'position-absolute',
    'z-3',
    'translate-middle-y',
    'top-50',
    'border-0',
    'blur-esldr__arrow-btn'
] %}

{% set iconPrev = config.icon.default ~ '-left' %}
{% set iconNext = config.icon.default ~ '-right' %}

{% block component_blur_elysium_slider_arrows %}

    {% if config.active %}
        <div class="blur-elysium-slider__controls splide__arrows"
            data-blur-elysium-slider-controls>

            {% block cms_element_blur_elysium_slider_controls_prev %}
                <button 
                    type="button"
                    aria-label="{{ 'blurElysiumSlides.sliderControls.prev' | trans }}"
                    class="{% block component_blur_elysium_slider_arrow_button_classes %}{{ arrowClasses|join(' ') }}{% endblock %} splide__arrow splide__arrow--prev">
                    
                    {% block cms_element_blur_elysium_slider_controls_prev_icon %}
                        {% sw_include '@Storefront/storefront/utilities/icon.html.twig' with {
                            name: iconPrev
                        } %}
                    {% endblock %}
                </button>
            {% endblock %}

            {% block cms_element_blur_elysium_slider_controls_next %}
                <button 
                    type="button"
                    aria-label="{{ 'blurElysiumSlides.sliderControls.next' | trans }}"
                    class="{{ block('component_blur_elysium_slider_arrow_button_classes') }} splide__arrow splide__arrow--next">

                    {% block cms_element_blur_elysium_slider_controls_next_icon %}
                        {% sw_include '@Storefront/storefront/utilities/icon.html.twig' with {
                            name: iconNext
                        } %}
                    {% endblock %}
                </button>
            {% endblock %}

        </div>
    {% endif %}

{% endblock %}