/*
=========================================================
SoundCloud
=========================================================
 * Styling for the SoundCloud waveform widget.
 *
 * Limepark AB, 2017
=========================================================*/

.lp-soundcloud {
  margin: 1.5rem 0;
  position: relative;
}

/* States */
.lp-soundcloud--is-preparing {}
.lp-soundcloud--is-ready {}
.lp-soundcloud--has-error {}
.lp-soundcloud--is-playing {}
.lp-soundcloud--is-paused {}

.lp-soundcloud .lp-soundcloud__iframe-wrap {
  display: none;
}
.lp-soundcloud--has-error .lp-soundcloud__iframe-wrap {
  display: block;
}

.lp-soundcloud .lp-icon--pause,
.lp-soundcloud--is-playing .lp-icon--play {
  display: none;
}

.lp-soundcloud--is-playing .lp-icon--pause {
  display: block;
}

/* Waveform */
.lp-soundcloud__waveform {
  height: auto;
  width: 100%;
}

.lp-soundcloud__waveform canvas {
  height: auto;
  vertical-align: middle;
  width: 100%;
}

/* Controls */
.lp-soundcloud__controls {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
}

.lp-soundcloud__controls button {
  cursor: pointer;
  margin: 0.5em;
}

.lp-soundcloud .lp-soundcloud__title {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0 1em;
  overflow: hidden;
  padding-right: 1em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Errors */
.lp-soundcloud__missing-url {
  background: #fef2f4;
  border: 2px solid #e1001a;
  padding: 1rem;
}