/* Icons from https://cssicons.space */
.icon, .icon:before, .icon:after, .icon i, .icon i:before, .icon i:after {
  transition: all 0.4s ease;
}

.icon, .icon i {
  display: block;
  position: absolute;
}

.icon::before, .icon::after {
  content: '';
  position: absolute;
  display: block;
}

.play.icon {
  margin-left: 20%;
  width: 68%;
  height: 70%;
}

.play.icon i {
  height: 100%;
  width: 10%;
  border-radius: 100px;
  background-color: currentColor;
}

.play.icon::before, .play.icon::after {
  left: 6%;
  width: 96%;
  height: 10%;
  border-radius: 100px;
  background-color: currentColor;
}

.play.icon::before {
  top: 0;
  transform-origin: left top;
  transform: rotate(30deg);
}

.play.icon::after {
  bottom: 0;
  transform-origin: left bottom;
  transform: rotate(-30deg);
}

.pause.icon {
  margin-left: 15%;
  width: 70%;
  height: 70%;
}

.pause.icon::before, .pause.icon::after {
  width: 40%;
  height: 100%;
  background-color: currentColor;
  border-radius: 10%;
}

.pause.icon::after {
  right: 0;
}

.previous_track.icon {
  margin-left: 28%;
  width: 68%;
  height: 70%
}

.previous_track.icon::before {
  left: 10%;
  width: 0;
  height: 0;
  border-right: solid 1.7em currentColor;
  border-top: solid 1.7em transparent;
  border-bottom: solid 1.7em transparent;
  border-radius: 5px;
}

.previous_track.icon::after {
  top: 3%;
  width: 12%;
  height: 95%;
  border-radius: 100px;
  background-color: currentColor;
}

.next_track.icon {
  margin-left: 20%;
  width: 68%;
  height: 70%
}

.next_track.icon::before {
  left: 10%;
  width: 0;
  height: 0;
  border-left: solid 1.7em currentColor;
  border-top: solid 1.7em transparent;
  border-bottom: solid 1.7em transparent;
  border-radius: 5px;
}

.next_track.icon::after {
  right: 27%;
  top: 3%;
  width: 13%;
  height: 95%;
  border-radius: 100px;
  background-color: currentColor;
}