.m3-audio-reader {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  max-width: 100%;
  color: inherit;
  vertical-align: middle;
}

.m3-audio-reader__media {
  display: none;
}

.m3-audio-reader__source {
  min-width: 0;
  overflow-wrap: anywhere;
}

.m3-audio-reader__toggle {
  /* Keep the control proportional to surrounding prose, matching the reader's inline role. */
  display: inline-grid;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: var(--shape-corner-xs);
  background: transparent;
  color: currentColor;
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
}

.m3-audio-reader__toggle:hover {
  color: var(--primary);
}

.m3-audio-reader__toggle:focus:not(:focus-visible)::before {
  opacity: 0;
}

.m3-audio-reader__speaker {
  display: block;
  width: 1.2em;
  height: 1.2em;
}

.m3-audio-reader[data-audio-reader-state="playing"] .m3-audio-reader__toggle {
  color: var(--primary);
}

.m3-audio-reader[data-audio-reader-state="error"] .m3-audio-reader__toggle {
  color: var(--error);
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-reduced) .m3-audio-reader__toggle {
    transition: color var(--m3e-duration-short) var(--m3e-easing-standard);
  }

  html:not(.motion-reduced)
    .m3-audio-reader[data-audio-reader-state="playing"]
    .m3-audio-reader__speaker {
    animation: m3-audio-reader-wave calc(var(--m3e-duration-medium) * 3)
      steps(1, end) infinite;
  }
}

@keyframes m3-audio-reader-wave {
  0%,
  32% {
    clip-path: inset(0 50% 0 0);
  }

  33%,
  65% {
    clip-path: inset(0 29% 0 0);
  }

  66%,
  100% {
    clip-path: inset(0);
  }
}