.player-container {
  height         : 100%;
  overflow       : hidden;
  width          : 70vw;
  max-width      : 50em;
  display        : flex;
  flex-direction : column;
  justify-content: space-between;
  align-items    : center;
}

.audio-player {
  width    : 100%;
  max-width: 100%;
  display  : flex;
  margin   : 2rem 1rem;
}

.player-body {
  width  : 100%;
  padding: 1rem;
}

.title {
  width      : 100%;
  font-weight: 600;
}

.waveform {
  width     : 100%;
  min-height: 7rem;
  padding   : 0.5rem 0;
}

.controls {
  display        : flex;
  flex-flow      : row;
  justify-content: space-between;
  gap            : 1em;
}

.controls>div {
  display  : flex;
  flex-flow: row;
  gap      : 1em;
}

.controls i {
  width    : 1em;
  font-size: x-large;
  cursor   : pointer;
  color    : var(--primary-color);
}


.timecode {
  color     : var(--primary-color);
  align-self: center;
}

.volume {
  display    : flex;
  flex-flow  : row;
  align-items: center
}

.volume-slider {
  margin: 0 2rem;
  cursor: pointer;

  width             : 100%;
  height            : 3px;
  outline           : none;
  -webkit-appearance: none;
  background-color  : var(--secondary-color);
}

/* 
  Custom volume slider 
  https://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
  */

.volume-slider.volume-slider {
  -webkit-appearance: none;
  --slider-size     : 2px;
}

.volume-slider::-webkit-slider-runnable-track {
  width        : 300px;
  height       : 5px;
  border       : none;
  border-radius: 3px;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  border            : none;
  height            : 16px;
  width             : 16px;
  border-radius     : 50%;
  background        : var(--highlight-color);
  margin-top        : -0.4em;
}

.volume-slider::-moz-range-thumb {
  border       : none;
  height       : 16px;
  width        : 16px;
  border-radius: 50%;
  background   : var(--highlight-color);
}

.volume-slider[disabled] {
  cursor    : not-allowed;
  background: var(--secondary-color);
}

.volume-slider[disabled]::-webkit-slider-thumb {
  background-color: var(--secondary-color);
}

.volume-slider[disabled]::-moz-range-thumb {
  background-color: var(--secondary-color);
}

.waveform {
  min-height: 5vw;
}

.waveform>* {
  overflow: hidden !important;
}