.progress-bar-track {
  background: linear-gradient(to right, white var(--progress-width), transparent var(--progress-width));
  &-end {
    background: linear-gradient(to right, white var(--progress-width), white var(--progress-width));
  }
}

.music-progress-bar {
  @apply cursor-pointer outline-0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;

  &::-webkit-slider-runnable-track {
    @apply h-[.3rem] rounded-full;
    @extend .progress-bar-track;
  }

  &::-webkit-slider-thumb {
    @apply mt-[.2rem] invisible;
  }

  &-end {
    @extend .music-progress-bar;
    opacity: .3;
    &::-webkit-slider-runnable-track {
      @apply h-[.3rem] rounded-full;
      @extend .progress-bar-track-end;
    }
  }

  &-play {
    @extend .music-progress-bar;
    &::-webkit-slider-runnable-track {
      @apply h-[.25rem] rounded;
      @extend .progress-bar-track;
    }
  }

  &-play-end {
    @extend .music-progress-bar-end;
    &::-webkit-slider-runnable-track {
      @apply h-[.25rem] rounded;
      @extend .progress-bar-track;
    }
  }
}

.volume-progress-bar {
  @extend .music-progress-bar;
  &::-webkit-slider-runnable-track {
    @apply h-[.2rem] rounded;
    @extend .progress-bar-track;
  }


  &-end {
    @extend .music-progress-bar-end;
    &::-webkit-slider-runnable-track {
      @apply h-[.2rem];
      @extend .progress-bar-track-end;
    }
  }
}