@mediaplayer-height: 70px;
@main-color: @brand-primary;
@main-color-bright: lighten(@main-color, 20%);

.jp-jplayer{
    width: 1px !important;
    height: 1px !important;
}

#mediawrapper{
    height: @mediaplayer-height;
    position: fixed;
    bottom: 0px;
    right: 0px;
    left: 0px;
    overflow: hidden;
    background-color: #fff;
    z-index: @zindex-player-panel;
    .box-shadow(~"2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8)");
}

#albumart{
    background-color: #eee;
    float: left;
    width: @mediaplayer-height;
    height: @mediaplayer-height;
    left: 0px;
}

.cm-songtitle{
    &-container{
        position: fixed;
        left: 50%;
        bottom: 49px;
        z-index: @zindex-player-panel + 1;
        pointer-events: none;
    }
    float: left;
    left: -50%;
    position:relative;
    white-space: nowrap;
}

.jp{

    &-bar-seek{
        .progress-bar-variant(@main-color-bright);
        cursor: pointer;
    }
    
    &-bar-played{
        .progress-bar-variant(@main-color);
        cursor: pointer;
    }
    
    &-controls{
        position: absolute;
        padding: 0;
    }

    &-control-buttons{
        position: absolute;
        left: 50%;
        width: 240px;
        margin-left: -120px;
        bottom: 42px
    }

    &-time-holder{
        left: 0;
        top: 10px;
        width: 100%;
    }
    &-current-time{
        float: left;
        margin-left: 5px;
    }
    &-duration{
        float: right;
        margin-right: 5px;
    }

    &-toggles{
        list-style-type: none;
        padding: 0;
        position: absolute;
        bottom: 4px;
        left: 50%;
        margin-left: 130px
    }
    &-toggles li{
        display: inline-block;
    }

    &-controls li{
        display: inline;
    }
    &-volume{    
        &-toggles{
            list-style: none outside none;
            position: absolute;
            left: 180px;
            padding: 0;
        }
        &-bar{
            height: 6px !important;
            position: absolute;
            width: 60px;
            top: 28px;
        }
        &-toggles li{
            display: inline;
        }
        jp-mute{
            padding: 1px 4px !important;
            top: 0;
        }
        jp-unmute{
            padding: 1px 4px !important;
            top: 0;
        }
        &-max{
            margin-left: 6px;
            padding: 1px 4px !important;
            top: 0;
        }
    }
}
