.cap-player {
  --cap-background: #000;
  --cap-height: 52px;
  --cap-radius: 0;
  --cap-padding: 0 14px;
  --cap-icon-color: #f1f1f1;
  --cap-icon-hover: #fff;
  --cap-play-icon-size: 23px;
  --cap-play-width: 32px;
  --cap-track: #555;
  --cap-played: #e8e8e8;
  --cap-track-height: 5px;
  --cap-track-radius: 0;
  --cap-time-color: #e5e5e5;
  --cap-time-gap: 7px;
  --cap-volume-icon: #f1f1f1;
  --cap-volume-icon-size: 21px;
  --cap-volume-color: #f1f1f1;
  --cap-volume-width: 92px;
  --cap-volume-height: 5px;
  align-items: center;
  background: var(--cap-background);
  border-radius: var(--cap-radius);
  box-sizing: border-box;
  display: flex;
  gap: 12px;
  height: var(--cap-height);
  max-width: 100%;
  min-width: 0;
  padding: var(--cap-padding);
  width: 100%;
}

.cap-audio { display: none; }
.cap-icon-button { align-items: center; appearance: none; background: transparent; border: 0; color: var(--cap-icon-color); cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 32px; justify-content: center; margin: 0; padding: 0; width: var(--cap-play-width); }
.cap-icon-button:hover:not(:disabled), .cap-icon-button:focus-visible { color: var(--cap-icon-hover); }
.cap-icon-button:focus-visible, .cap-progress:focus-visible, .cap-volume:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cap-icon-button:disabled, .cap-progress:disabled, .cap-volume:disabled { cursor: not-allowed; opacity: .45; }
.cap-icon-button svg { display: block; fill: currentColor; height: var(--cap-play-icon-size); width: var(--cap-play-icon-size); }
.cap-icon-pause, .cap-icon-muted { display: none !important; }
.cap-player.is-playing .cap-icon-play, .cap-player.is-muted .cap-icon-volume { display: none !important; }
.cap-player.is-playing .cap-icon-pause, .cap-player.is-muted .cap-icon-muted { display: block !important; }
.cap-mute { color: var(--cap-volume-icon); width: 24px; }
.cap-mute svg { height: var(--cap-volume-icon-size); width: var(--cap-volume-icon-size); }

.cap-progress, .cap-volume { appearance: none; background: linear-gradient(to right, var(--cap-played) 0%, var(--cap-played) var(--cap-fill, 0%), var(--cap-track) var(--cap-fill, 0%), var(--cap-track) 100%); border: 0; border-radius: var(--cap-track-radius); cursor: pointer; height: var(--cap-track-height); margin: 0; min-width: 0; padding: 0; }
.cap-progress { flex: 1 1 80px; }
.cap-volume { --cap-fill: 100%; background: linear-gradient(to right, var(--cap-volume-color) 0%, var(--cap-volume-color) var(--cap-fill), var(--cap-track) var(--cap-fill), var(--cap-track) 100%); flex: 0 1 var(--cap-volume-width); height: var(--cap-volume-height); width: var(--cap-volume-width); }
.cap-progress::-webkit-slider-thumb, .cap-volume::-webkit-slider-thumb { appearance: none; background: var(--cap-played); border: 0; border-radius: 50%; height: 11px; opacity: 0; width: 11px; }
.cap-volume::-webkit-slider-thumb { background: var(--cap-volume-color); }
.cap-progress:hover::-webkit-slider-thumb, .cap-progress:focus::-webkit-slider-thumb, .cap-volume:hover::-webkit-slider-thumb, .cap-volume:focus::-webkit-slider-thumb { opacity: 1; }
.cap-progress::-moz-range-thumb, .cap-volume::-moz-range-thumb { background: var(--cap-played); border: 0; border-radius: 50%; height: 11px; opacity: 0; width: 11px; }
.cap-volume::-moz-range-thumb { background: var(--cap-volume-color); }
.cap-progress:hover::-moz-range-thumb, .cap-progress:focus::-moz-range-thumb, .cap-volume:hover::-moz-range-thumb, .cap-volume:focus::-moz-range-thumb { opacity: 1; }

.cap-time { color: var(--cap-time-color); display: flex; flex: 0 0 auto; font-family: Arial, sans-serif; font-size: 12px; gap: var(--cap-time-gap); line-height: 1; white-space: nowrap; }

@media (max-width: 767px) {
  .cap-player { gap: 8px; padding-left: 9px; padding-right: 9px; }
  .cap-volume { flex-basis: min(var(--cap-volume-width), 55px); width: min(var(--cap-volume-width), 55px); }
  .cap-time { font-size: 11px; gap: 4px; }
  .cap-mute { width: 20px; }
}