Progress.css

/* stylelint-disable declaration-empty-line-before */
@import '../../styles/vars';

.circleWrap {
  width: 100%;
  height: 100%;

  transform: rotate(-90deg);

  stroke-width: 6px;
  fill: transparent;
}

.circle .track {
  stroke: rgba(255, 255, 255, 0.2);
}

.circle .played {
  stroke: #fff;
}

.panel {
  width: 100%;
  border-radius: 4px;
}

.panel .track {
  position: relative;
  cursor: grab;

  width: 100%;
  height: 2px;

  border-radius: 4px;
  background: #434343;

  @media $mobile {
    height: 4px;
  }
}

.panel .played {
  background: #b9bab7;
  height: 100%;
  margin-top: 3px;
}

.knob {
  position: absolute;
  top: -5px;

  width: 12px;
  height: 12px;
  margin-left: -1px;

  content: '';
  cursor: grab;

  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.1),
    0 2px 2px rgba(0, 0, 0, 0.05);

  @media $mobile {
    width: 14px;
    height: 14px;
  }
}

.isInEpisodeBlock {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: flex;
  align-items: center;
  flex-flow: row wrap;
  justify-content: center;

  stroke-width: 4px;
}

.isInEpisodeBlock .circleWrap {
  width: 68px;
  height: 68px;

  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5);

  stroke-width: 4px;
}

.isInAudioPlayer .panel {
  height: 2px;
}

.isInAudioPlayer.panel .track {
  background-color: #dadada;
}

.isInAudioPlayer.panel .track::before {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 0;
  right: 0;
  content: '';
}

.isInAudioPlayer.panel .played {
  background: #b9bab7;
}

.isInAudioPlayer.panel .knob {
  top: -2px;

  width: 8px;
  height: 8px;
  margin-left: -3px;

  background: #b9bab7;
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
}

.isInAudioPlayer.unplayed.circle .track {
  opacity: 0.2;
}

.isInAudioPlayer.circle {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  z-index: -1;
}

.isInAudioPlayer.circle svg {
  stroke-width: 2px;
}

.isInAudioPlayer.circle .track {
  stroke: rgba(255, 255, 255, 0.2);
}

.isInPodcastMaterial {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  z-index: -1;
}

.isInPodcastMaterial .track {
  stroke: #7c7c7c;
}