/**
 * Sound player chrome (P4.1).
 *
 * Stage is the original HTML embed 142×57 (SWF 142.5×57). Button graphics
 * sit at the P2.2 SVG viewBox origins so hover/down keep their native size.
 */

.sound-player-figure {
  margin: 0;
}

.sound-player {
  position: relative;
  width: 142px;
  height: 57px;
  background: var(--color-bg, #000);
}

.sound-player-audio {
  display: block;
  width: 142px;
}

html.js .sound-player-audio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.sound-player-chrome {
  display: none;
  position: relative;
  width: 142px;
  height: 57px;
}

html.js .sound-player-chrome {
  display: block;
}

.sound-player-btn {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Red graphics; the site-wide red focus ring would disappear on them. */
.sound-player-btn:focus-visible {
  outline: var(--focus-ring, 2px solid #ff0000);
  outline-color: var(--color-text, #ffcc99);
  outline-offset: 2px;
}

.sound-player-state {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.sound-player-state--over,
.sound-player-state--down {
  visibility: hidden;
}

.sound-player-btn:hover .sound-player-state--up,
.sound-player-btn:focus-visible .sound-player-state--up {
  visibility: hidden;
}

.sound-player-btn:hover .sound-player-state--over,
.sound-player-btn:focus-visible .sound-player-state--over {
  visibility: visible;
}

.sound-player-btn:active .sound-player-state--up,
.sound-player-btn:active .sound-player-state--over {
  visibility: hidden;
}

.sound-player-btn:active .sound-player-state--down {
  visibility: visible;
}

/* Stop: union of up/over/down viewBoxes from stop-*.svg */
.sound-player-btn--stop {
  --x: 31.692322px;
  --y: 9.329869px;
  left: var(--x);
  top: var(--y);
  width: 35.070847px;
  height: 36.717712px;
}

.sound-player-btn--stop .sound-player-state--up {
  left: calc(32.560265px - var(--x));
  top: calc(9.774968px - var(--y));
  width: 33.82457px;
  height: 35.382416px;
  background-image: url("/assets/media/img/player/stop-up.svg");
}

.sound-player-btn--stop .sound-player-state--over {
  left: 0;
  top: 0;
  width: 35.070847px;
  height: 36.717712px;
  background-image: url("/assets/media/img/player/stop-over.svg");
}

.sound-player-btn--stop .sound-player-state--down {
  left: calc(33.428207px - var(--x));
  top: calc(9.819478px - var(--y));
  width: 32.956627px;
  height: 34.447708px;
  background-image: url("/assets/media/img/player/stop-down.svg");
}

/* Play: union of up/over/down viewBoxes from play-*.svg */
.sound-player-btn--play {
  --x: 79.517288px;
  --y: 6.259808px;
  left: var(--x);
  top: var(--y);
  width: 33.713214px;
  height: 41.905654px;
}

.sound-player-btn--play .sound-player-state--up {
  left: calc(81.275056px - var(--x));
  top: calc(8.302066px - var(--y));
  width: 29.749802px;
  height: 38.520957px;
  background-image: url("/assets/media/img/player/play-up.svg");
}

.sound-player-btn--play .sound-player-state--over {
  left: calc(81.235074px - var(--x));
  top: 0;
  width: 31.995428px;
  height: 41.585513px;
  background-image: url("/assets/media/img/player/play-over.svg");
}

.sound-player-btn--play .sound-player-state--down {
  left: 0;
  top: calc(8.725256px - var(--y));
  width: 30.410442px;
  height: 39.440206px;
  background-image: url("/assets/media/img/player/play-down.svg");
}

.sound-player-caption {
  margin-top: var(--space-1, 5px);
  font-family: var(--font-body, Geneva, "Helvetica Neue", Arial, sans-serif);
  font-size: var(--font-size-2, 13px);
}