.audio_play_button,
.audio_prev_button,
.audio_next_button {
  background-color: transparent !important;
}

.audio_play_button i,
.audio_prev_button i,
.audio_next_button i {
  color: #910000;
  transition: filter 0.3s;
}

.audio_play_button:hover i,
.audio_prev_button:hover i,
.audio_next_button:hover i {
  filter: brightness(180%);
}


/* waveform -------------------- */

.waveform_div {  /* NOTE set dynamically in main.css */
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
  margin-bottom: 1rem;
  /* height: 4rem; */

  --waveform_div_before_width: .1rem;
  --waveform_div_before_display: none;
  --waveform_div_before_margin_left: 0;
  /* --bi_url: none;  /1* url for background-image *1/ */
}

.waveform_div::before {
  content: "";
  position: absolute;

  height: 100%;  /* highest volume_level in 00-meta.json files is 60.00 */
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: .25rem;
  /* box-shadow: var(--shadow); */

  /* rgba(145, 0, 0, 1) equals #910000 */
  background: linear-gradient(
    rgba(0, 0, 0, 0)     0%,
    rgba(145, 0, 0, .25) 25%,
    rgba(145, 0, 0, .6)  50%,
    rgba(145, 0, 0, .25) 75%,
    rgba(0, 0, 0, 0)     100%
  );


  width: var(--waveform_div_before_width);
  display: var(--waveform_div_before_display);
  margin-left: calc(var(--waveform_div_before_margin_left) - var(--waveform_div_before_width));
  transition: margin-left 200ms ease-in-out;
  /* background-image: var(--bi_url); */
}

.waveform {

  /* equals 'height' set in graphs.js for sparkline */
  /* the purpose here is to prevent the flicker effect on audio player
     when page loads by htmx
  */
  min-height: 60px;

  box-shadow: none;
}