.slider-control {
  position: relative;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-32);
  background: var(--color-gray-0);
  box-shadow: inset 0 0 0 2px var(--color-accent-400);
}

.slider-control--hover {
  box-shadow: inset 0 0 0 2px var(--color-accent-400),
              0 0 0 4px var(--color-alpha-gray-24);
}

.slider-control--active {
  background: var(--color-accent-400);
}

.slider-control__popover {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
}

.slider-control:not(.slider-control--active) .slider-control__popover {
  display: none;
}

.slider-control--live {
  cursor: grab;
  touch-action: none;
}

.slider-control--live:hover,
.slider-control--live:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-accent-400),
              0 0 0 4px var(--color-alpha-gray-24);
}

.slider-control--live:active,
.slider-control--live.slider-control--active {
  cursor: grabbing;
  background: var(--color-accent-400);
}

.slider-control--live .slider-control__popover {
  display: none;
}

.slider-control--live:active .slider-control__popover,
.slider-control--live:focus-visible .slider-control__popover,
.slider-control--live.slider-control--active .slider-control__popover {
  display: flex;
}