/*
 * Mini 01: cartao de 450x90, nos tons de sempre. Aqui sobra altura, entao a
 * capa e o texto vem maiores que na barra e o volume fica embaixo do nome.
 */

:root {
    --pl-bg: #e5ebf0;
    --pl-fg: #22303a;
    --pl-muted: #64757f;
    --pl-accent: #4c5f69;
    --pl-accent-fg: #ffffff;
    --pl-line: #c9d5dd;
    --pl-cover-radius: 6px;
    --pl-pad: 10px 12px;
    --pl-gap: 10px;
}

/* mini nao e barra de topo: ele ocupa a caixa inteira que o site reservou */
.pl--m01 {
    position: static;
    height: 100%;
    min-height: 90px;
}

.pl--m01 .pl__in { max-width: none; }

.pl--m01 .pl__cover { width: 44px; height: 44px; }
.pl--m01 .pl__play { width: 36px; height: 36px; }
.pl--m01 .pl__play svg { width: 17px; height: 17px; }

.pl--m01 .pl__label { font-size: 13px; }
.pl--m01 .pl__track { font-size: 14px; }

/* aqui cabe altura: os dois botoes em cima e a barra de volume embaixo */
.pl--m01 .pl__vol {
    display: grid;
    grid-template-columns: auto auto;
    gap: 4px 6px;
    justify-items: end;
}

.pl--m01 .pl__range { grid-column: 1 / -1; width: 84px; }

/* a regra estreita da base e para as barras de site, nao para o mini */
@media (max-width: 430px) {
    .pl--m01 .pl__range { display: block; }
}