{% macro printSliderCaption(styles) %}
    {% for key,value in styles %}
        {% if value != '' and  key != 'background-color' and  key != 'carousel-background-color' %}
            {{ key }}: {{ value|raw }};
        {% endif %}
    {% endfor %}
{% endmacro %}

{% set properties = item.properties|json_decode %}

{{ StyleHelper.generatePresetSelector('.moto-widget-slider', item.class_name) }} {
{% if properties.caption.desktop.base['background-color'] != '' %}
    .bx-caption {
        background-color: {{ properties.caption.desktop.base['background-color'] }};
    }
{% endif %}
{% if FEATURES.theme_widget_slider__html_caption %}
    .bx-caption_text {
        {{ _self.printSliderCaption(properties.caption.desktop.base) }}
    }
{% else %}
    .bx-caption {
        {{ _self.printSliderCaption(properties.caption.desktop.base) }}
    }
{% endif %}
    .bx-controls-direction {
        .bx-prev, .bx-next {
            {{ StyleHelper.generateLessFromArray(properties.arrows.desktop.base) }}
            &:hover {
                {{ StyleHelper.generateLessFromArray(properties.arrows.desktop.hover) }}
            }
        }
    }
    .bx-pager-link {
        {{ StyleHelper.generateLessFromArray(properties.pagination.desktop.base) }}
        &:hover {
            {{ StyleHelper.generateLessFromArray(properties.pagination.desktop.hover) }}
        }
        &.active {
            {{ StyleHelper.generateLessFromArray(properties.current_pagination.desktop.base) }}
            &:hover {
                {{ StyleHelper.generateLessFromArray(properties.current_pagination.desktop.hover) }}
            }
        }
    }
    .moto-widget-slider__thumbnail-pagination {
        {{ StyleHelper.generateLessFromArray(properties.thumbnail_pagination.desktop.base) }}

        @media screen and (max-width: @const_media_tablet_max_width) {
            {{ StyleHelper.generateLessFromArray(properties.thumbnail_pagination['tablet'].base) }}
        }
        @media screen and (max-width: @const_media_mobile-h_max_width) {
            {{ StyleHelper.generateLessFromArray(properties.thumbnail_pagination['mobile-h'].base) }}
        }
        @media screen and (max-width: @const_media_mobile-v_max_width) {
            {{ StyleHelper.generateLessFromArray(properties.thumbnail_pagination['mobile-v'].base) }}
        }
    }
    .moto-widget-slider__thumbnail-pagination-item {
        {{ StyleHelper.generateLessFromArray(properties.thumbnail_pagination_item.desktop) }}
        &.active{
            {{ StyleHelper.generateLessFromArray(properties.current_thumbnail_pagination_item.desktop) }}
        }
        @media screen and (max-width: @const_media_tablet_max_width) {
            {{ StyleHelper.generateLessFromArray(properties.thumbnail_pagination_item['tablet'].base) }}
        }
        @media screen and (max-width: @const_media_mobile-h_max_width) {
            {{ StyleHelper.generateLessFromArray(properties.thumbnail_pagination_item['mobile-h'].base) }}
        }
        @media screen and (max-width: @const_media_mobile-v_max_width) {
            {{ StyleHelper.generateLessFromArray(properties.thumbnail_pagination_item['mobile-v'].base) }}
        }
    }
}

{% if properties.caption.desktop.base['carousel-background-color'] != '' %}
{{ StyleHelper.generatePresetSelector('.moto-widget.moto-widget-carousel', item.class_name) }} {
    .moto-widget-carousel-caption {
        background-color: {{ properties.caption.desktop.base['carousel-background-color'] }};
    }
}
{% endif %}