.audio-player .timeline {
      background: white;
      width: 100%;
      position: relative;
      cursor: pointer;
      box-shadow: 0 2px 10px 0 #0008;
    }
        .audio-player .timeline .progress {
      background: coral;
      width: 0%;
      height: 100%;
      transition: 0.25s;
    }
            .audio-player .controls {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      padding: 0 20px;
    }
    .audio-player .controls > * {
      display: flex;
      justify-content: center;
      align-items: center;
    }
        .audio-player .controls .toggle-play.play {
      cursor: pointer;
      position: relative;
      left: 0;
      height: 0;
      width: 0;
      border: 7px solid #0000;
      border-left: 13px solid white;
    }
    .audio-player .controls .toggle-play.play:hover {
      transform: scale(1.1);
    }
    .audio-player .controls .toggle-play.pause {
      height: 15px;
      width: 20px;
      cursor: pointer;
      position: relative;
    }
    .audio-player .controls .toggle-play.pause:before {
      position: absolute;
      top: 0;
      left: 0px;
      background: white;
      content: "";
      height: 15px;
      width: 3px;
    }
    .audio-player .controls .toggle-play.pause:after {
      position: absolute;
      top: 0;
      right: 8px;
      background: white;
      content: "";
      height: 15px;
      width: 3px;
    }
    .audio-player .controls .toggle-play.pause:hover {
      transform: scale(1.1);
    }
        .audio-player .controls .time {
      display: flex;
    }
    .audio-player .controls .time > * {
      padding: 2px;
    }
    .audio-player .controls .volume-container {
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.audio-player .controls .volume-container .volume-button {
  height: 26px;
  display: flex;
  align-items: center;
}
.audio-player .controls .volume-container .volume-button .volume {
  transform: scale(0.7);}
    .audio-player .controls .volume-container .volume-slider {
      position: absolute;
      top: 15px;
      left: -3px;
      z-index: -1;
      width: 0;
      height: 15px;
      background: white;
      box-shadow: 0 0 20px #000a;
      transition: 0.25s;
    }
    .audio-player .controls .volume-container .volume-slider .volume-percentage {
      background: coral;
      height: 100%;
      width: 75%;
    }
    .audio-player .controls .volume-container:hover .volume-slider {
      left: -123px;
      width: 120px;
    }

/* CSS */
.button {
  appearance: none;
  background-color: #FFFFFF;
  border-radius: 40em;
  border-style: none;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system,sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.24px;
  margin: 0;
  outline: none;
  padding: 1rem 1.3rem;
  text-align: center;
  text-decoration: none;
  transition: all .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button:hover {

  transform: scale(1.125);
}

.button:active {
  transform: scale(1.025);
}

@media (min-width: 768px) {
  .button {
    font-size: 1.5rem;
    padding: .75rem 2rem;
  }
}