wpsstm-tracklist{
    display:block;
    position:relative;
    margin:auto;
    .wpsstm-tracks-list{
        position:relative;
        padding:0;
        margin:0;
        list-style: none;
        width:100%;
        font-size:.8em;

        > * {
            &:nth-child(odd){
                background: rgba(0, 0, 0, 0.03);
            }
        }

    }
    .wpsstm-tracklist-notices{
        position:relative;
        margin:auto;
        padding: .5em 0;
        list-style: none!important;
        margin: 0 !important;
    }

    &.wpsstm-post-tracklist{

        .wpsstm-tracklist-actions{
            display:block;
            list-style: none;
            text-align:center;
            margin:.5em 0;

            .wpsstm-tracklist-action{
                padding: .5em;
                font-size:.8em;

                &:hover{
                    border-color:#F7F7F7;
                    background:rgba(0, 0, 0, .025);
                }

            }
        }
    }

    &.tracklist-bottom-player .wpsstm-player{
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        z-index: 50;
    }
    &:not(.tracklist-active).tracklist-bottom-player .wpsstm-player{
        display:none;
    }

    &.tracklist-expired{
        .wpsstm-reload-bt{
            animation: opacityPulse 1s linear infinite;
            @extend .wpsstm-can-click;
        }
    }

    .wpsstm-tracklist-header{
        margin-bottom:1em;
        font-size:.9em;
        text-align:center;

        .wpsstm-tracklist-infos{
            display:flex;

            .wpsstm-tracklist-cover{
                position:relative;
                width:25%;
                max-width:250px;
                flex-shrink:0;
                box-sizing: content-box;
                > div{
                    width: 100%;
                    padding-top: 100%; /* 1:1 Aspect Ratio */
                    background: rgba(0, 0, 0, 0.05);
                }
                .wpsstm-tracklist-play-bt{
                    position: absolute;
                    top: calc(50% - 1em);
                    left: calc(50% - 1em);
                    width: 2em;
                    height: 2em;
                    line-height: 2em;
                    font-size: 2em;
                    text-align: center;
                    text-align: center;
                    border: 1px solid #DDD;
                    border-radius: 50%;
                    background: white;
                    @extend .wpsstm-can-click;
                    z-index: 1;
                }
                img{
                    width: 100%;
                    height: 100%;
                    vertical-align: top;
                    object-fit: cover;
                    position:absolute;
                    top: 0;
                    left: 0;
                }
            }

            .wpsstm-tracklist-data{
                margin:1em;
                flex-grow:1;
                .wpsstm-live-tracklist-icon{
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 2em;
                    height: 2em;
                    background: #efef90;
                    border-radius: 50%;
                    @extend .wpsstm-align-both;
                    > *{
                        font-size:.5em;
                    }
                }

                .wpsstm-tracklist-title{
                    font-size:1.5em;
                    margin:0;
                    margin-bottom:.5em;
                }

                >ul{
                    text-align: right;
                    list-style: none;
                    font-size:.8em;
                    opacity:.5;
                    > li{
                        @extend .wpsstm-icon;
                        margin-top: 0;
                        line-height: 1.25em;
                        &.wpsstm-tracklist-date{
                            >time{
                                @extend .wpsstm-icon;
                                &.wpsstm-tracklist-updated:before{
                                    content:"\f017"; //.fa-clock-o
                                }
                                &.wpsstm-tracklist-refresh-time:before{
                                    content:"\f021"; //.fa-refresh
                                }
                            }
                        }
                        &.wpsstm-live-tracklist-link:before{
                            content:"\f0c1";
                        }
                        &.wpsstm-tracklist-tracks-count:before{
                            content:"\f0ca"; //.fa-list-ul
                        }
                    }
                }
            }
        }

    }

    &.tracklist-reloading{
        @extend .wpsstm-freeze;
        @include striped-bg();
        min-height:1em;
        .wpsstm-tracklist-play-bt{
            display:none;
        }
    }

    &:not(.tracklist-expired){
        .wpsstm-tracklist-action-refresh{
            opacity:.5;
        }
    }

    &.favorited-tracklist{
        .wpsstm-tracklist-action.action-favorite{
            display:none;
        }
    }
    &:not(.favorited-tracklist){
        .wpsstm-tracklist-action.action-unfavorite{
            display:none;
        }
    }

    #wpsstm-new-tracks{
        text-align:center;
        .wpsstm-new-track{
            display:none;
        }
    }

    .wpsstm-new-track{
        display:flex;
        padding:.5em;

        .wpsstm-new-track-data-row{
            display:flex;
            flex-grow:1;
            flex-shrink:1;
        }
        .wpsstm-new-track-actions{
            display:flex;
            flex-grow:0;
            flex-shrink:0;
        }

        &.action-loading{
            @extend .wpsstm-freeze;
            @include striped-bg();
            > *{
                opacity:.25;
            }
        }

        &.action-error{
            border:1px solid red;
        }
    }


    //play BT

    &[wpsstm-playable]:not(.tracklist-has-played){
        .wpsstm-tracklist-play-bt{
            animation: opacityPulse 1s linear infinite;
        }
    }
    &.tracklist-loading .wpsstm-tracklist-play-bt .wpsstm-icon{
        @extend .wpsstm-loading-icon;
        @extend .wpsstm-freeze;
    }
    &:not(.tracklist-playing) .wpsstm-tracklist-play-bt .wpsstm-icon:before{
        content:"\f04b"; //.fa-play
    }

    &.tracklist-has-played{
        .wpsstm-tracklist-cover{
            .wpsstm-tracklist-play-bt{
                display:none;
            }
            &:hover .wpsstm-tracklist-play-bt{
                display:inherit;
            }
        }
    }

    &.tracklist-playing{
        .wpsstm-tracklist-play-bt .wpsstm-icon:before{
            content:"\f04c"; //.fa-pause;
        }
    }

    &:not([wpsstm-playable]) .wpsstm-tracklist-play-bt{
        display:none;
    }

    &.standalone-track{
        .wpsstm-track-position{
            display:none;
        }
    }
}

.wpsstm-tracklist-actions{

    clear:both;

    .wpsstm-tracklist-action{
        &.wpsstm-tracklist-action-refresh:before,
        &.wpsstm-tracklist-action-import:before{
            content:"\f021";//.fa-refresh;
        }
        &.wpsstm-tracklist-action-share:before{
            content:"\f1e0";//.fa-share-alt;
        }
        &.wpsstm-tracklist-action-export:before{
            content:"\f019";//.fa-download;
        }

        &.wpsstm-tracklist-action-new-subtrack:before{
            content:"\f055";//.fa-plus-circle;
        }
        &.wpsstm-tracklist-action-live:before,
        &.wpsstm-tracklist-action-static:before{
            content:"\f09e";//.fa-rss;
        }
        &.wpsstm-tracklist-action-live:before{
            opacity:.25;
        }
        &.wpsstm-tracklist-action-edit-backend:before{
            content:"\f084";//.fa-key;
        }
        &.wpsstm-tracklist-action-trash:before{
            content: "\f1f8";//.fa-trash;
        }
    }

}

ul.tracklist-list{
    > li{
        border-bottom: 1px solid rgba(51, 51, 51, 0.1);
        padding: 1em 0;
        > *{
            align-items: center;
            padding: 0 .25em;
            box-sizing: border-box;
            max-width:50%;
            &.wpsstm-tracklist-title{
                a{
                    @extend .wpsstm-ellipsis;
                }
                .wpsstm-tracklist-post-state{
                    &.wpsstm-tracklist-post-state-publish{
                        display:none;
                    }
                }
            }
            &.wpsstm-tracklist-actions{
              justify-content: space-between;
              flex-grow: 0;
              flex-shrink: 0;
              text-align:right;
              visibility:hidden;
              .wpsstm-action{
                @extend .wpsstm-action-icon;
              }
            }
        }
        &:hover{
            .wpsstm-tracklist-actions{
                visibility:visible;
            }
        }

    }
}