._toggleplay, ._togglemute {
  --size: 1.5rem;
}

._toggleplay input, ._toggleplay input:disabled, ._togglemute input, ._togglemute input:disabled {
  opacity: 0;
}

._toggleplay label, ._togglemute label {
  position: relative;
  vertical-align: middle;
  width: var(--size);
  height: var(--size);
  margin-left: -1.5rem;
}

._toggleplay label::after, ._togglemute label::after {
  position: absolute;
  top: calc(var(--size) * 0.1);
  left: calc(var(--size) * 0.1);
  width: calc(var(--size) * 0.8);
  height: calc(var(--size) * 0.8);
  cursor: pointer;
}

._toggleplay label::after, ._toggleplay input:disabled ~ label::after {
  content: url('data:image/svg+xml;charset=UTF-8,<svg class="bi bi-play-fill" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white"> <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path> </svg>');
}

._toggleplay input:checked ~ label::after {
  content: url('data:image/svg+xml;charset=UTF-8,<svg class="bi bi-pause-fill" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white"> <path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5m5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5"></path> </svg>');
}

._togglemute label::after, ._togglemute input:disabled ~ label::after {
  content: url('data:image/svg+xml;charset=UTF-8,<svg class="bi bi-volume-up-fill" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white"> <path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"></path> <path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89z"></path> <path d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"></path> </svg>');
}

._togglemute input:checked ~ label::after {
  content: url('data:image/svg+xml;charset=UTF-8,<svg class="bi bi-volume-mute-fill" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white"> <path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zm7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z"></path> </svg>');
}

