.zaudio{
display:flex;
align-items:center;
gap:12px;
height:40px;
padding:0 14px;
background:#bdbdbd;
border-radius:30px;
}

.zaudio-play{
width:22px;
height:22px;
border:none;
background:none;
cursor:pointer;
position:relative;
flex-shrink:0;
}

/* play */

.zaudio-play:before{
content:"";
position:absolute;
left:7px;
top:5px;
border-left:9px solid #333;
border-top:6px solid transparent;
border-bottom:6px solid transparent;
}

/* pause */

.zaudio-play.playing:before{
content:"";
position:absolute;
left:7px;
top:5px;
width:3px;
height:12px;
background:#333;
box-shadow:6px 0 0 #333;
border:none;
}

/* зона прогресса */

.zaudio-bar{
flex:1;
height:16px;            /* большая зона для пальца */
display:flex;
align-items:center;
cursor:pointer;
}

/* фон полосы */

.zaudio-bar{
position:relative;
}

.zaudio-bar::before{
content:"";
position:absolute;
left:0;
right:0;
height:6px;
background:#e4e4e4;
border-radius:20px;
}

/* прогресс */

.zaudio-progress{
position:absolute;
left:0;
height:6px;
background:#666;
border-radius:20px;
width:0%;
}

/* бегунок */

.zaudio-progress::after{
content:"";
position:absolute;
right:-6px;
top:50%;
transform:translateY(-50%) scale(0);
width:12px;
height:12px;
background:#666;
border-radius:50%;
transition:transform .15s ease;
}

/* показываем бегунок */

.zaudio:hover .zaudio-progress::after{
transform:translateY(-50%) scale(1);
}

.zaudio-bar:active .zaudio-progress::after{
transform:translateY(-50%) scale(1);
}

/* время */

.zaudio-time{
font-size:12px;
color:#333;
min-width:60px;
text-align:right;
flex-shrink:0;
}