{% set viewports = element.config.viewports.value %}

{% apply spaceless %}
    <style>
        #elysiumSlider-{{ element.id }} 
        .blur-elysium-slider {
            {% if sliderArrows.colors.default %}
                --arrow-icon-color: {{sliderArrows.colors.default}};
            {% endif %}
            {% if sliderArrows.bgColors.default %}
                --arrow-bg-color: {{sliderArrows.bgColors.default}};
            {% endif %}
            {% if sliderArrows.colors.active %}
                --arrow-icon-color-active: {{sliderArrows.colors.active}};
            {% endif %}
            {% if sliderArrows.bgColors.active %}
                --arrow-bg-color-active: {{sliderArrows.bgColors.active}};
            {% endif %}
            {% if sliderNavigation.align is same as('start') or sliderNavigation.align is same as('end') %}
                --nav-justify-content: {{ 'flex-' ~ sliderNavigation.align }};
            {% endif %}
            {% if sliderNavigation.colors.default %}
                --nav-bullet-color: {{sliderNavigation.colors.default}};
            {% endif %}
            {% if sliderNavigation.colors.active %}
                --nav-bullet-color-active: {{sliderNavigation.colors.active}};
            {% endif %}
        }

        {# viewport options for cms element #}
        {% for device, options in viewports %}
            @media (min-width: {{ theme_config('breakpoint.' ~ blurElysiumBreakpoints[device])~'px' }}) {
                #elysiumSlider-{{ element.id }}
                .blur-elysium-slide
                {
                    {% if options.sizing.aspectRatio.auto is same as(true) %}
                        --slide-aspect-ratio: auto;
                    {% elseif options.sizing.aspectRatio.width and options.sizing.aspectRatio.height %}
                        --slide-aspect-ratio: {{options.sizing.aspectRatio.width}} / {{options.sizing.aspectRatio.height}};
                    {% endif %}
                    {% if options.sizing.maxHeightScreen is same as(true) %}
                        --slide-max-height: 100vh;
                    {% elseif options.sizing.maxHeight is same as(0) %}
                        --slide-max-height: auto;
                    {% elseif options.sizing.maxHeight %}
                        --slide-max-height: {{ options.sizing.maxHeight ~ 'px' }};
                    {% endif %}
                    {% if options.sizing.paddingY %}
                        --slide-padding-offset-y: {{ options.sizing.paddingY ~ 'px' }};
                    {% endif %}
                    {% if options.sizing.paddingX %}
                        --slide-padding-offset-x: {{ options.sizing.paddingX ~ 'px' }};
                    {% endif %}
                }
                #elysiumSlider-{{ element.id }}
                .blur-elysium-slider
                {
                    --elysium-slider-columns: {{ options.settings.slidesPerPage ?? 1 }};
                    --elysium-slider-gap: {{ options.sizing.slidesGap ?? 0 ~ 'px' }};
                    {% if options.arrows.iconSize is not empty %}
                        --arrow-icon-size: {{ options.arrows.iconSize ~ 'px' }};
                    {% endif %}
                    {% if options.navigation.gap is not empty %}
                        --nav-bullet-gap: {{ options.navigation.gap ~ 'px' }};
                    {% endif %}
                    {% if sliderNavigation.shape is same as('circle') %}
                        {% if options.navigation.size is same as('sm') %}
                            --nav-bullet-size: 12px;
                        {% elseif options.navigation.size is same as('lg') %}
                            --nav-bullet-size: 20px;
                        {% else %}
                            --nav-bullet-size: 16px;
                        {% endif %}
                    {% endif %}
                    {% if sliderNavigation.shape is same as('bar') %}
                        {% if options.navigation.size is same as('sm') %}
                            --nav-bullet-size: 24px;
                        {% elseif options.navigation.size is same as('lg') %}
                            --nav-bullet-size: 40px;
                        {% else %}
                            --nav-bullet-size: 32px;
                        {% endif %}
                    {% endif %}
                }
            }            
        {% endfor %}
        {% block cms_element_blur_elysium_slider_css_styles_extend %}{% endblock %}
    </style>
{% endapply %}