/* pending: user sees a clean placeholder, not native controls */
.ti-audio-wrap.ti-audio--pending {
  position: relative;
}

/* hide the native controls visuals (space already reserved by your wrapper) */
.ti-audio-wrap.ti-audio--pending audio {
  opacity: 0;
}

/* skeleton */
.ti-audio-wrap.ti-audio--pending::before {
  content: "";
  display: block;
  height: 56px;              /* match your reserved height */
  border-radius: 12px;
  background: rgba(0,0,0,.06);
}

/* when ready: remove skeleton and fade in plyr */
.ti-audio-wrap.ti-audio--ready::before {
  display: none;
}

.ti-audio-wrap.ti-audio--ready audio {
  opacity: 1;
  transition: opacity .12s ease;
}

[data-plyr="play"] svg.icon--not-pressed {
    padding-left: 2px;
}

button.plyr__controls__item.plyr__control[data-plyr="play"] {
    background: var(--text-color-primary, #fff);
    border-radius: 500px;
    padding: 12px 12px 12px 12px;
    color: var(--background-color-secondary, #212121);
}