/* Placement, size and color belong to the host UI. */
.virtual-stick {
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.virtual-stick [data-stick-thumb] {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(calc(-50% + var(--stick-x, 0px)), calc(-50% + var(--stick-y, 0px)));
  pointer-events: none;
  /* Only the thumb animates; release zeroes movement synchronously. */
  transition: transform 160ms cubic-bezier(.18, .86, .32, 1.18);
}

.virtual-stick.is-active [data-stick-thumb] {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .virtual-stick [data-stick-thumb] {
    transition: none;
  }
}