.audio-player {
    display: flex;
    align-items: center;
    width: 100%;
    height: 36px;
    background-color: var(--color-bg);
    box-sizing: border-box;
}

.play-pause-btn {
    width: 32px;
    height: 32px;
    margin-left: 8px;
    padding: 0 4px;
    border: none;
    background-color: transparent;
    margin-right:8px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.play-pause-btn.paused::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background-color: var(--color-text-dim);

    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z'/></svg>");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.play-pause-btn.playing::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-color: var(--color-text-dim);

    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/></svg>");
    mask-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/></svg>");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.progress-bar {
    flex-grow: 1;
    height: 10px;
    background-color: var(--color-content-bg);
    padding:12px 0;
    background-clip: content-box; /* restricts bg col to non-padded area */
    margin-left: 4px;
    margin-right: 6px;
    position: relative;
    cursor: pointer;
}

.progress-bar-thumb {
    width: 25px;
    height: 10px;
    background-color: var(--color-text-dim);
    padding:12px 0;
    background-clip: content-box;
    position: absolute;
    top: 0;
    left: 0; /* set programmatically */
}

.time-display {
    margin-left: 10px;
    color: var(--color-text-dim);
    font-family: sans-serif;
    font-size:14px;
    user-select: none;
}
.time-total {
    color: var(--color-text-dim);
    font-family: sans-serif;
    font-size:14px;
    user-select: none;
}
@media (max-width: 600px) {
    .time-total {
        display: none;
    }
}

.volume-controls {
    margin-left:10px;
    display: flex;
    align-items: center;
}

.volume-btn {
    width: 24px;
    height: 24px;
    border: none;
    background-color: transparent;
    margin-right:12px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.volume-btn.unmuted::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;

    background-color: var(--color-text-dim);
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'> <path d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/> <path stroke='black' fill='none' d='M15.5 12c0 1.77-1.02 3.29-2.5 4.03V7.97c1.48.74 2.5 2.26 2.5 4.03z'/> </svg>");
    mask-image: url("data:image/svg+xml;charset=utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'> <path d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/> <path stroke='black' fill='none' d='M15.5 12c0 1.77-1.02 3.29-2.5 4.03V7.97c1.48.74 2.5 2.26 2.5 4.03z'/> </svg>");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.volume-btn.muted::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;

    background-color: var(--color-text-dim);
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.volume-slider {
    width: 80px;
    height: 10px;
    background-color: var(--color-content-bg);
    background-clip: content-box;
    padding:12px 0;
    position: relative;
    cursor: pointer;
    margin-right: 12px;
}
@media (max-width: 600px) {
    .volume-slider {
        display: none;
    }
}

.volume-slider-thumb {
    width: 15px;
    height: 10px;
    background-color: var(--color-text-dim);
    padding:12px 0;
    background-clip: content-box;
    position: absolute;
    top: 0;
    left: 0; /* set programmatically */
}
@media (max-width: 600px) {
    .volume-slider-thumb {
        display: none;
    }
}