/*
 * Mini 02: 380x60, o creme de sempre. Espaco curto, entao o nome da musica
 * anda em marquee e o rotulo sai.
 */

:root {
    --pl-bg: #f0ebe5;
    --pl-fg: #14100c;
    --pl-muted: #857c72;
    --pl-accent: #14100c;
    --pl-accent-fg: #f0ebe5;
    --pl-line: #d9d0c5;
    --pl-cover-radius: 50%;
    --pl-pad: 8px 10px;
    --pl-gap: 8px;
}

.pl--m02 {
    position: static;
    height: 100%;
    min-height: 60px;
}

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

.pl--m02 .pl__cover { width: 30px; height: 30px; background: #e2dbd1; }
.pl--m02 .pl__play { width: 30px; height: 30px; }
.pl--m02 .pl__play svg { width: 14px; height: 14px; }
.pl--m02 .pl__label { display: none; }

.pl--m02 .pl__mq {
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}

.pl--m02 .pl__range { width: 62px; }

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

/* ai sim: sem espaco de verdade a barra sai e fica so o botao de mudo */
@media (max-width: 330px) {
    .pl--m02 .pl__range { display: none; }
}