/*
 * Modelo 02: o cinza de sempre, controles a esquerda e nada de cor propria.
 * Fundo #f4f5fa, como sempre foi, e os controles num cinza so.
 */

:root {
    --pl-bg: #f4f5fa;
    --pl-fg: #14161a;
    --pl-muted: #7c828c;
    --pl-accent: #9b9a9a;
    --pl-accent-fg: #14161a;
    --pl-line: #dfe1e9;
    --pl-cover-radius: 4px;
}

/*
 * A barra e um pouco mais baixa que o iframe de propria vontade: e a sobra
 * que deixa a sombra aparecer embaixo, como no modelo antigo.
 */
.pl--02 {
    height: 56px;
    border-bottom: 1px solid var(--pl-line);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

.pl--02 .pl__play { order: 1; }
.pl--02 .pl__vol { order: 2; margin-right: 4px; }
.pl--02 .pl__cover { order: 3; }
.pl--02 .pl__meta { order: 4; }

/* o botao e o proprio icone: sem fundo, sem borda, so maior */
.pl--02 .pl__play {
    width: 40px;
    height: 40px;
    color: #9b9a9a;
    border-radius: 6px;
    background: none;
}

.pl--02 .pl__play svg { width: 32px; height: 32px; }

/* o icone maior pede um contorno um pouco mais grosso que o dos outros */
.pl--02 .pl__play svg path { stroke-width: 2.6; }

/* no hover muda so o tom do icone: fundo atras dele fica pesado */
.pl--02 .pl__play:hover { color: #9a9da2; background: none; }
.pl--02 .pl__play:active { transform: scale(.92); }
.pl--02.is-loading .pl__play::after { border-color: #9b9a9a; border-top-color: transparent; }

/* icones de volume e de TV no mesmo cinza do play */
.pl--02 .pl__mute,
.pl--02 .pl__cast { color: #9b9a9a; }
.pl--02 .pl__mute:hover,
.pl--02 .pl__cast:hover { color: #9a9da2; }

.pl--02 .pl__cover { background: #e4e6ee; }

.pl--02 .pl__label {
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
}