weathermen/soundstorm

.player {
  background: darken($background-color, 20%);
  padding: 10px;
  border-radius: 3px;
}
  .player--disabled {
    .player__bar {
      visibility: hidden;
    }
  }
.player__placeholder {
  p {
    padding: 20px 0;
    text-align: center;
  }
}
.player__interface {
  display: grid;
  grid-template-columns: 1fr 12fr;
}
.player__media {
  display: none;
}
.player__transport {
  text-align: center;
  background: darken($background-color, 30%);
}
.player__button {
  margin-bottom: 1vh;
  text-align: center;
  padding: 15px;
}
.player__icon {
  @extend %fa-icon;
  @extend .fas;
  text-decoration: none;
  font-size: 2em;
}
  .player__icon--paused {
    &:before {
      content: fa-content($fa-var-play);
    }
  }
  .player__icon--playing {
    &:before {
      content: fa-content($fa-var-pause);
    }
  }
.player__duration {
  font-size: .8em;
  text-align: center;
}
.player__elapsed {
  display: inline-block;
}
.player__left {
  display: inline-block;
  margin-left: 5px;
}
.player__waveform {
  position: relative;
  cursor: pointer;

  img {
    max-width: 100%;
  }
}
.player__progress {
  position: absolute;
  left: 0;
  top: 0;
  background: black;
  opacity: .3;
  height: 100%;
  width: 1px;
  border-right: 1px solid #FFF;
}
.player__bar {
  display: grid;
  justify-items: right;
}

.player__stats {
  display: flex;
  width: 36%;

  .button_to {
    display: inline-block;
  }
}

.player__stat {
  flex: 1;
  text-align: center;
  padding: 10px 0;
}

.player__embedded-title {
  margin-left: 10px

  a {
    text-decoration: none;
    color: white;
  }
}