:host {
  display: block;
}

div {
  padding: 0 20px;
}

*[hidden] {
  display: none;
}

label {
  display: flex;
  align-items: center;
}

label > *:last-child {
  margin-left: 0.5em;
}

label > *:last-child:not([type="checkbox"]) {
  flex: 1 0 auto;
}

/*
 Warning:
 The following are demonstrations of using CSS variables to customize player color. 
 They do not use our design token values for color.
*/
rh-audio-player.purple {
  --rh-audio-player-background-color: #633ec5;
  --rh-audio-player-range-thumb-color: #f56d6d;
  --rh-audio-player-range-progress-color: #f56d6d;
}

rh-audio-player.purple.img {
  --rh-audio-player-background-color: #000000;
}

rh-audio-player.purple.img::part(toolbar) {
  background-image: url("https://www.redhat.com/cms/managed-files/episode-1-art-hero.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
}

rh-audio-player.cyan {
  --rh-audio-player-background-color: #00aee9;
  --rh-audio-player-range-thumb-color: #ffe953;
  --rh-audio-player-range-progress-color: #ffe953;
}