.audio-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.8em;
  padding-top: 0.5rem;
  padding-bottom: 0.3rem;
  background-color: transparent;
}

.audio-player input[type='range'] {
  width: 50%;
}

[data-play-pause-button='pause'] {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23ffff" class="bi bi-pause-circle" viewBox="0 0 16 16"%3E %3Cpath d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/%3E %3Cpath d="M5 6.25a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0zm3.5 0a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0z"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

[data-play-pause-button='play'] {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23ffff" class="bi bi-play-circle" viewBox="0 0 16 16"%3E %3Cpath d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/%3E %3Cpath d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  cursor: pointer;
}