/*
 * Styles for the <audio-viel> custom element.
 *
 * Ships alongside audio-viel.js and covers only what the element renders
 * itself. Styling of the <audio> inside it is left to the host page.
 *
 * Colours derive from currentColor, so the element takes on whatever the
 * surrounding text does, including on a dark background and without a media
 * query.
 */

audio-viel {
  display: block; /* custom elements are inline by default */
  position: relative;
}

/*
 * Room above the player for the reading below, but only where there is one to
 * show. Reserved rather than overlapped, so the player keeps its full width and
 * nothing jumps when the reading hides itself on play.
 */
audio-viel:has(.audio-viel-remaining) {
  margin-block-start: 1.4em;
}

/*
 * How much time the file still costs from here on. Sits just above the player's
 * right edge rather than on top of it: the native controls fill their whole
 * width, so anything laid over them covers something.
 *
 * Plain text, no chip. It is a note about the file, not a control, and a filled
 * shape next to a player with rounded corners reads as a badge stuck on.
 */
.audio-viel-remaining {
  position: absolute;
  bottom: calc(100% + 2px);
  inset-inline-end: 2px;
  color: color-mix(in srgb, currentColor 70%, transparent);
  font-size: 0.75em;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  white-space: nowrap;
}

/*
 * Between asking for playback and hearing any of it. With preload="none" that
 * can be seconds, and nothing else on the player says the request was even
 * received.
 *
 * The delay means a file that starts promptly never pulses at all — the hint is
 * for the wait, not for every press. The count means one that never arrives
 * stops after about ten seconds rather than blinking for as long as the page is
 * open.
 */
audio-viel[data-starting] .audio-viel-remaining {
  animation: audio-viel-awaiting-playback 1.2s ease-in-out 0.3s 8;
}

@keyframes audio-viel-awaiting-playback {
  50% { opacity: 0.3; }
}

/*
 * Once played, the native controls have the file loaded and report all of this
 * themselves. Hidden rather than removed, so the space stays reserved and the
 * page does not shift under the reader's finger the moment they press play.
 */
audio-viel[data-played] .audio-viel-remaining {
  visibility: hidden;
}