.sliding-pill-view {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.sliding-pill-view .sliding-pill-thumb {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--sliding-pill-width);
  height: var(--sliding-pill-height);
  transform: translate(var(--sliding-pill-x, 0px), var(--sliding-pill-y, 0px));
  border-radius: var(--border-radius-pill);
  background-color: var(--background-color-blue);
  opacity: 0;
}

.sliding-pill-view .sliding-pill-thumb[data-placed='true'] {
  opacity: 1;
}

.sliding-pill-view .sliding-pill-thumb[data-animate='true'] {
  transition: transform var(--transition-duration-medium) var(--transition-timing-function-user), width var(--transition-duration-medium) var(--transition-timing-function-user), height var(--transition-duration-medium) var(--transition-timing-function-user);
}

@media (prefers-reduced-motion: reduce) {
  .sliding-pill-view .sliding-pill-thumb[data-animate='true'] {
    transition: none !important;
  }
}