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

{{ StyleHelper.generatePresetSelector('.moto-media-player', item.class_name) }}{

    {{ StyleHelper.generateLessFromArray(properties.buttons_active.desktop, '.mejs-inner .mejs-controls .mejs-button.mejs-button_active button, .mejs-inner .mejs-controls .mejs-button.mejs-button_active.mejs-moto-download-button a') }}

    {{ StyleHelper.generateLessFromArray(properties.buttons_normal.desktop, '.mejs-controls .mejs-button button, .mejs-controls .mejs-volume-button button, .mejs-overlay-button, .mejs-controls .mejs-button.mejs-moto-download-button a') }}

    .mejs-controls {

        {{ StyleHelper.generateLessFromArray(properties.widget_container.desktop.base) }}

        {{ StyleHelper.generateLessFromArray(properties.progress_bar.desktop.base, '.mejs-time-current, .mejs-time-handle') }}

        {{ StyleHelper.generateLessFromArray(properties.volume_bar.desktop.base, '.mejs-horizontal-volume-current, .mejs-horizontal-volume-handle') }}

        .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-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'] }};
        }
    }

    .mejs__playlist {
        {{ StyleHelper.generateLessFromArray(properties.playlist.desktop.base) }}
        li {
            {{ StyleHelper.generateLessFromArray(properties.playlist_item.desktop.base) }}

            {% if properties.playlist_item.desktop.hover.color %}
                span:hover{
                    color: {{ properties.playlist_item.desktop.hover.color }};
                }
            {% endif %}

            {% if properties.playlist_item.desktop.hover['background-color'] %}
                &:hover {
                    background-color: {{ properties.playlist_item.desktop.hover['background-color'] }};
                }
            {% endif %}

            &.current {
                {{ StyleHelper.generateLessFromArray(properties.playlist_item_active.desktop.base) }}

                {% if properties.playlist_item_active.desktop.hover.color %}
                    span:hover {
                        color: {{ properties.playlist_item_active.desktop.hover.color }};
                    }
                {% endif %}

                {% if properties.playlist_item_active.desktop.hover['background-color'] %}
                    &:hover {
                        background-color: {{ properties.playlist_item_active.desktop.hover['background-color'] }};
                    }
                {% endif %}
            }
        }
    }
}