/*
 *
 * Audioplayer
 * ================================================
 * Styles for the jPlayer in 'Tontr√§ger' section
 *
 */

/* ==============[ general settings for jPlayer ]=============================== */
.tx-dlf-audio {
    display: none;
}
.jp-audio {
    position: absolute;
    top: 50px;
    right: 0;
    bottom: 80px;
    left: 0;
    background: transparent !important;
    border: 0 none !important;
    z-index: 9;
    width: auto !important;
    .jp-details {
        display: none;
    }
    .jp-interface {
        position: absolute;
        bottom: 60px;
        right: 0;
        left: 0;
        height: 40px !important;
        width: auto;
        background: fade(@base-blue,95%);
        .jp-controls-holder {
            top: 0;
            width: 100%;
            height: 30px;
            overflow: visible;
            z-index: 10;
            .jp-toggles {
                .jp-repeat {
                    position: absolute;
                    top: 5px;
                    right: 10px;
                    width: 30px;
                    height: 30px;
                    background: url(../Images/controlIcons.svg) no-repeat -422px -60px;
                    background-size: auto 90px;
                    opacity: 0.5;
                    .jp-state-looped& {
                        opacity: 1;
                    }
                }
            }
            .jp-duration-divider {
                display: none;
            }
            .jp-controls {
                position: absolute;
                top: -50%;
                padding: 0;
                overflow: visible;
                .jp-play {
                    position: absolute;
                    top: 5px;
                    left: 10px;
                    width: 60px;
                    height: 60px;
                    background: fade(#fff,95%);
                    border-radius: 30px;
                    border: 1px solid @base-blue;
                    padding: 0;
                    &:before {
                        position: absolute;
                        top: 23px;
                        left: 22px;
                        width: 0;
                        height: 0;
                        border: 10px solid transparent;
                        border-width: 0 10px 15px 10px;
                        border-bottom-color: @base-blue;
                        .transform(rotate(90deg));
                        content: " ";
                        .transition();
                    }
                    &:after {
                        position: absolute;
                        top: 20px;
                        left: 32px;
                        width: 6px;
                        height: 20px;
                        background: @base-blue;
                        opacity: 0;
                        .transform(rotate(90deg));
                        content: " ";
                        .transition();
                    }
                    .jp-state-playing& {
                        &:before {
                            top: 20px;
                            left: 22px;
                            border-width: 0;
                            width: 6px;
                            height: 20px;
                            background: @base-blue;
                            .transform(rotate(0));
                        }
                        &:after {
                            opacity: 1;
                            .transform(rotate(0));
                        }
                    }
                }
                .jp-stop {
                    display: none;
                }
            }
            .jp-progress {
                top: 16px;
                left: 120px;
                right: 255px;
                width: auto;
                height: 4px;
                border-radius: 2px;
                background: transparent;
                .jp-state-no-volume& {
                    right: 90px;
                }
                .jp-seek-bar {
                    background: fade(@light-blue,40%);
                    .jp-play-bar {
                        background: #fff;
                        box-shadow: 2px 0 4px rgba(0,0,0,0.5);
                    }
                }
            }
            .jp-current-time, .jp-duration {
                position: absolute;
                top: 9px;
                width: 50px;
                font-style: normal;
                font-size: 12px;
                color: #fff;
            }
            .jp-current-time {
                left: 65px;
                text-align: right;
            }
            .jp-duration {
                right: 200px;
                .jp-state-no-volume& {
                    right: 35px;
                }
                text-align: left;
            }
        }
        .jp-volume-controls {
            position: absolute;
            top: 5px;
            right: 50px;
            left: auto;
            height: 30px;
            width: 150px;
            z-index: 12;
            .jp-mute, .jp-volume-max {
                width: 30px;
                height: 30px;
                background: url(../Images/controlIcons.svg) no-repeat 0 0;
                background-size: auto 90px;
                padding: 0;
            }
            .jp-mute {
                left: 0;
                background-position: -450px -0px;
            }
            .jp-volume-max {
                left: auto;
                right: 0;
                background-position: -450px -30px;
            }
            .jp-volume-bar {
                top: 12px;
                left: 35px;
                right: 35px;
                width: auto;
                height: 4px;
                border-radius: 2px;
                background: fade(@light-blue,40%);
                .jp-volume-bar-value {
                    background: #fff;
                    box-shadow: 2px 0 4px rgba(0,0,0,0.5);
                }
            }
        }
    }
    @media screen and (min-width: @phoneLandscapeViewportWidth) {
        .jp-interface {
            bottom: 20px;
            right: 35px;
            left: 35px;
            border-radius: 30px;
        }
    }
    @media screen and (min-width: @tabletLandscapeViewportWidth) {
        bottom: 0;
        .jp-interface {
            bottom: 40px;
        }
    }
}
