/*
 * Modelo 05: preto, com os controles na esquerda, como sempre foi. O lugar do
 * antigo botao do Facebook agora e do envio para a TV, e o azul deu lugar ao
 * cinza.
 */

:root {
    --pl-bg: #000000;
    --pl-fg: #ffffff;
    --pl-muted: #9aa1a9;
    --pl-accent: #ffffff;
    --pl-accent-fg: #6b7178;
    --pl-line: #3a3a3a;
    --pl-cover-radius: 50%;
    --pl-gap: 10px;
}

/* o grupo do volume se desfaz: a TV fica depois da barra, onde ficava o
   botao do Facebook */
.pl--05 .pl__vol { display: contents; }
.pl--05 .pl__play { order: 1; }
.pl--05 .pl__mute { order: 2; }
.pl--05 .pl__range { order: 3; margin-left: -4px; }
.pl--05 .pl__cast { order: 4; }
.pl--05 .pl__cover { order: 5; }
.pl--05 .pl__meta { order: 6; }

.pl--05 .pl__play { width: 42px; height: 42px; }
.pl--05 .pl__play svg { width: 25px; height: 25px; }

.pl--05 .pl__mute { color: #ffffff; }
.pl--05 .pl__mute:hover { color: var(--pl-muted); }
.pl--05 .pl__cast { color: #ffffff; }
.pl--05 .pl__cast:hover { color: var(--pl-muted); }

/* a barra do volume e o marcador ficam no cinza, e nao na cor do botao */
.pl--05 .pl__range { width: 96px; }
.pl--05 .pl__range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(to right, #8a9199 var(--vol), #d9dde1 var(--vol));
}

.pl--05 .pl__range::-moz-range-track { height: 8px; border-radius: 999px; background: #d9dde1; }
.pl--05 .pl__range::-moz-range-progress { height: 8px; border-radius: 999px; background: #8a9199; }
.pl--05 .pl__range::-webkit-slider-thumb { width: 15px; height: 15px; margin-top: -3.5px; background: #8a9199; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .3); }
.pl--05 .pl__range::-moz-range-thumb { width: 15px; height: 15px; background: #8a9199; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .3); }

/* modelo sem capa: o que interessa aqui e o nome da musica correndo */
.pl--05 .pl__cover { display: none; }
.pl--05 .pl__label { display: none; }

/* o texto anda pela tag marquee; o css cuida do esmaecido das pontas */
.pl--05 .pl__mq {
    width: 100%;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.3;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}