{% macro printStyle(styles) %}
    {% for key,value in styles %}
        {% if key == 'before' %}
            &:before {
            {{ _self.printStyle(styles[key]) }}
            }
        {% elseif key == 'after' %}
            &:after {
            {{ _self.printStyle(styles[key]) }}
            }
        {% elseif value != '' %}
            {{ key }}: {{ value|raw }};
        {% endif %}
    {% endfor %}
{% endmacro %}

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

{{ StyleHelper.generatePresetSelector('.moto-media-player', item.class_name) }}{
    .mejs-inner {
        .mejs-controls {
            .mejs-button.mejs-button_active button {
                {{ _self.printStyle(properties.buttons_active.desktop.base) }}
                &:hover {
                    {{ _self.printStyle(properties.buttons_active.desktop.hover) }}
                }
            }
        }
    }
    .mejs-controls .mejs-button button, .mejs-controls .mejs-volume-button button, .mejs-overlay-button {
        {{ _self.printStyle(properties.buttons_normal.desktop.base) }}
        &:hover {
            {{ _self.printStyle(properties.buttons_normal.desktop.hover) }}
        }
    }
    .mejs-controls {
        {{ _self.printStyle(properties.widget_container.desktop.base) }}
        .mejs-time-current, .mejs-time-handle {
            {{ _self.printStyle(properties.progress_bar.desktop.base) }}
        }
        .mejs-time-loaded {
            background-color: fadeout({{ properties.progress_bar.desktop.base['background-color'] }}, 75%);
        }
        .mejs-time-total {
            background-color: fadeout({{ properties.progress_bar.desktop.base['background-color'] }}, 75%);
        }
        .mejs-time-handle {
            box-shadow: 0px 0px 4px 0px {{ properties.progress_bar.desktop.base['background-color'] }};
        }
        .mejs-horizontal-volume-current, .mejs-horizontal-volume-handle {
            {{ _self.printStyle(properties.volume_bar.desktop.base) }}
        }
        .mejs-horizontal-volume-total {
            background-color: fadeout({{ properties.volume_bar.desktop.base['background-color'] }}, 50%);
        }
        .mejs-horizontal-volume-handle {
            box-shadow: 0px 0px 4px 0px {{ properties.volume_bar.desktop.base['background-color'] }};
        }
    }
}