.audio-player {
  font-family: var(--mono-font);
  /* border-radius: 0.25rem; */
  padding: 0;
  /* border: 1px solid currentColor; */
  display: flex;

  justify-content: space-between;
  align-items: center;
}

.audio-player.compact {

}

.audio-player.fullsize{
    

}

.audio-player button {
  width: 2rem;
  height: 2rem;
  border:none;
}

.audio {
  /* margin-top: var(--modal-margin); */
  width: 100%;
}

.hitarea {
  position: absolute;
  width: 100%;
  height: 100%;

  z-index: 10;
}

.transcript {
  justify-self: flex-end;
}

.actions{
  /* display:grid;
  gap:1rem;
  grid-template-columns: 1fr 4fr; */
}

.audio-player .timecode {
  font-size: .75rem;
  margin-right: .75rem;
}

.jump{
    color:#999;
}

.audio-player:not(.compact) .audio-title{
    visibility: hidden;
    height:0;
    /* position: absolute; */
}

.audio-player.compact{
  justify-content: flex-start;
}

.compact #progressbar{
  /* display:none; */
  flex-grow:none;
}

#progressbar{
    position: relative;
    margin:0 .5rem;
    padding:.5rem 0;
    flex-grow:1;
    /* min-width:10rem; */
}

#progressbar-track {
  cursor: pointer;
  height: 1rem;
  display: flex;
  justify-content: start;
  align-items: center;
  background-image: url(./img/h-line.svg);
  background-repeat: repeat-x;
  background-position: 0% 51%;
  background-size: 2.5rem;
}

#progressbar-track.playing {
  background-image: url(./img/h-squig.svg);
  animation-name: animateWave;
  animation-direction: forward;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes animateWave {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#progressbar-played {
  pointer-events: none;
  height: 2px;
  display: flex;
  background: var(--font-color);
  align-self: center;
  width: 100%;
}

.bg-line {
  stroke-width: 2px;
  stroke: var(--font-color);
}

.audio-player .transport {
  display: flex;
}

.audio-player .handle {
  pointer-events: none;
  border-radius: 50%;
  /* background-color: var(--font-color); */
  background-color:var(--font-color);
  border:1.5px solid black;
  height: 9px;
  width: 9px;

  display: block;
  position: absolute;
}

/* waver animation */

.listening {
  width: 152px;
}

.wave {
  animation-name: pulse;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  height: 4px;
  y: 11px;
}

#wave-1,
#wave-1-2 {
  animation-delay: 0.2s;
}

#wave-2,
#wave-2-2 {
  animation-delay: 1s;
}

#wave-3,
#wave-3-2 {
  animation-delay: 0.6s;
}

#wave-5,
#wave-5-2 {
  animation-delay: 0.4s;
}

#wave-4,
#wave-4-2 {
  animation-delay: 0.8s;
}

@keyframes pulse {
  0%,
  100% {
    height: 4px;
    y: 11px;
  }
  50% {
    height: 26px;
    y: 0px;
  }
}