/* Modelo 01: claro e neutro, para entrar em qualquer site sem brigar com ele. */

:root {
    --pl-bg: #ffffff;
    --pl-fg: #14161a;
    --pl-muted: #6b7280;
    --pl-accent: #178d72;
    --pl-accent-fg: #ffffff;
    --pl-line: #e8ebef;
}

.pl--01 { border-bottom: 1px solid var(--pl-line); }

/* o disco continua do tamanho de sempre; o que cresce e o desenho dentro */
.pl--01 .pl__play svg { width: 21px; height: 21px; }

/* barra de volume mais encorpada que a dos outros modelos */
.pl--01 .pl__range { height: 18px; }

.pl--01 .pl__range::-webkit-slider-runnable-track {
    height: 7px;
    background: linear-gradient(to right, var(--pl-accent) var(--vol), var(--pl-line) var(--vol));
}

.pl--01 .pl__range::-moz-range-track { height: 7px; }
.pl--01 .pl__range::-moz-range-progress { height: 7px; }
.pl--01 .pl__range::-webkit-slider-thumb { width: 15px; height: 15px; margin-top: -4px; }
.pl--01 .pl__range::-moz-range-thumb { width: 15px; height: 15px; }