:root {
  --sd-player-bg: var(--sd-primary);
  --sd-player-light: var(--sd-light);
  --sd-player-fill: var(--sd-dark);
  --sd-player-space: var(--sd-space-m);
  --sd-player-border-radius: var(--sd-radius-m);
  --sd-player-title-size: var(--sd-text-l);
  --sd-player-play-btn-size: 60px;
  --sd-player-play-btn-radius: 50%;
  --sd-player-progress-height: 12px;
  --sd-player-progress-border-radius: 999px;
}

.sd-audio-player {
  background: var(--sd-player-bg);
  padding: var(--sd-player-space);
  border-radius: var(--sd-player-border-radius);
}
.sd-audio-player__title {
  font-size: var(--sd-player-title-size);
  color: var(--sd-player-light);
  margin-bottom: var(--sd-player-space);
}
.sd-audio-player__controls {
  display: flex;
  align-items: center;
  gap: var(--sd-player-space);
}
.sd-audio-player__button {
  width: var(--sd-player-play-btn-size);
  height: var(--sd-player-play-btn-size);
  border-radius: var(--sd-player-play-btn-radius);
  border: none;
  background: var(--sd-player-light);
  color: var(--sd-player-bg);
  font-size: 22px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.sd-audio-player__progress {
  flex: 1;
  appearance: none;
  height: var(--sd-player-progress-height);
  border-radius: var(--sd-player-progress-border-radius);
  background: var(--sd-player-light);
  cursor: pointer;
  /* Track */
  /* Thumb entfernen */
}
.sd-audio-player__progress::-webkit-slider-runnable-track {
  height: var(--sd-player-progress-height);
  border-radius: var(--sd-player-progress-border-radius);
  background: linear-gradient(to right, var(--sd-player-fill) 0%, var(--sd-player-fill) var(--progress, 0%), var(--sd-player-light) var(--progress, 0%), var(--sd-player-light) 100%);
}
.sd-audio-player__progress::-webkit-slider-thumb {
  appearance: none;
  width: 0;
  height: 0;
}
.sd-audio-player__progress::-moz-range-track {
  height: var(--sd-player-progress-height);
  border-radius: var(--sd-player-progress-border-radius);
  background: var(--sd-player-light);
}
.sd-audio-player__progress::-moz-range-progress {
  height: var(--sd-player-progress-height);
  border-radius: var(--sd-player-progress-border-radius);
  background: var(--sd-player-fill);
}
.sd-audio-player__progress::-moz-range-thumb {
  width: 0;
  height: 0;
  border: 0;
}
.sd-audio-player__time {
  color: var(--sd-player-light);
  font-size: var(--sd-text-s);
  white-space: nowrap;
  min-width: 10ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sd-audio-player__audio {
  display: none;
}
@media (max-width: 768px) {
  .sd-audio-player {
    --sd-player-space: var(--sd-space-s);
    --sd-player-play-btn-size: 52px;
    --sd-player-progress-height: 10px;
  }
  .sd-audio-player__title {
    margin-bottom: var(--sd-space-s);
  }
  .sd-audio-player__button {
    font-size: 20px;
  }
  .sd-audio-player__time {
    min-width: 9ch;
    font-size: var(--sd-text-xs);
  }
}
@media (max-width: 560px) {
  .sd-audio-player__controls {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "button time" "progress progress";
    align-items: center;
    row-gap: var(--sd-space-s);
    column-gap: var(--sd-space-s);
  }
  .sd-audio-player__button {
    grid-area: button;
    justify-self: start;
  }
  .sd-audio-player__time {
    grid-area: time;
    justify-self: end;
    text-align: right;
    min-width: 10ch;
  }
  .sd-audio-player__progress {
    grid-area: progress;
    width: 100%;
  }
}