.csrecorder {
  margin: 15px 0;
  font-size: 1rem;
}

.csrecorder-player {
  height:32px;
  width:100%;
}

.csrecorder-player-wrapper {
  transition:all 0.2s ease;
  max-height:0;
  overflow:hidden;
}

.csrecorder-player-wrapper.open {
  max-height:999px;
}

.csrecorder-player-control {
  background: #a138b3;
  color: #fff;
  padding: 0.4rem 0.4rem 0.4rem 1.8rem;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
  position:relative;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

a.csrecorder-player-control:hover,
a.screcorder-player-control.playing {
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  color:#fff;
  text-decoration:none;
  opacity:0.9;
}

.csrecorder-player-control::before {
  content:'▶';
  position:absolute;
  left:0.4rem;
  width:1rem;
  height:1rem;
}

.csrecorder-player-control.playing::before {
  content:'⏸️';
}