/**
* @prop --vm-spinner-width: The width of the spinner.
* @prop --vm-spinner-height: The height of the spinner.
* @prop --vm-spinner-thickness: The thickness of the spinner in px.
* @prop --vm-spinner-track-color: The color of the track the spinner is rotating in.
* @prop --vm-spinner-fill-color: The color of the progress within the track.
* @prop --vm-spinner-spin-duration: How long it takes the spinner to complete a full rotation.
* @prop --vm-spinner-spin-timing-func: The animation timing function to use for the spin.
* @prop --vm-spinner-z-index: The position in the UI z-axis stack inside the player.
*/
vime-spinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: var(--vm-spinner-z-index);
  opacity: 0;
  visibility: hidden;
  transition: var(--vm-fade-transition);
}
vime-spinner.hidden {
  display: none;
}
vime-spinner.active {
  opacity: 1;
  visibility: visible;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
vime-spinner > div {
  background: transparent;
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  pointer-events: none;
  border-top: var(--vm-spinner-thickness) solid var(--vm-spinner-fill-color);
  border-left: var(--vm-spinner-thickness) solid var(--vm-spinner-fill-color);
  border-right: var(--vm-spinner-thickness) solid var(--vm-spinner-track-color);
  border-bottom: var(--vm-spinner-thickness) solid var(--vm-spinner-track-color);
  transform: translateZ(0);
  animation: spin var(--vm-spinner-spin-duration) infinite var(--vm-spinner-spin-timing-func);
}
vime-spinner > div, vime-spinner > div::after {
  border-radius: 50%;
  width: var(--vm-spinner-width);
  height: var(--vm-spinner-height);
}