:root {
  --sound-text-color: var(--text-color);
  --sound-background-color: var(--inner-color) border-box;
  --sound-border-color: var(--inner-border-color);
  --sound-progress-fill: var(--inner-border-color);
  --sound-progress-bar: var(--inner-color);
  --sound-progress-thumb: white;
}

.sound-player {
  color: var(--sound-text-color);
  width: 100%;
  padding: 6px 0;
  image-rendering: pixelated;
}
.sound-player .sound-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 6px;
}
.sound-progress-bar {
  position: relative;
  height: 8px;
  background: var(--sound-progress-bar);
}
.sound-player .sound-controls {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.sound-player .sound-controls .sound-controls-left, .sound-player .sound-controls-right {
  display: flex;
  gap: 6px;
  justify-content: left;
}

.sound-player .sound-progress-bar {
  display: flex;
  position: relative;
  height: 16px;

  border-image: transparent;
  border-image-source: url('/assets/images/bg/scrollbar.png');
  border-image-width: 8px;
  border-image-slice: 7 fill;
  border-image-repeat: repeat;

  margin-top: auto;
  margin-bottom: auto;
}
.sound-player .sound-progress-bar:hover {
  cursor: pointer;
}
.sound-player .sound-progress-bar .progress-fill {
  display: block;
  position: absolute;
  height: 8px;
  background: transparent;
  z-index: 2;
}
.sound-player .sound-progress-bar .progress-fill:before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(50%, 50%);
  width: 32px;
  height: 16px;

  border-image: url('/assets/images/bg/scrollbar-thumb.png');
  border-image-width: 8px;
  border-image-slice: 7 fill;
  border-image-repeat: repeat;
}