.x-old-slider {
  position: relative;
  min-height: 32px;
  margin-left: 6px;
  margin-right: 6px;
}
.x-old-slider--disabled {
  opacity: 0.4;
  pointer-events: none;
}
.x-old-slider--track-container {
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.x-old-slider--track {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: currentColor;
}
.x-old-slider--thumb-container {
  position: absolute;
  top: 50%;
  -webkit-transition: left 80ms ease;
  transition: left 80ms ease;
  will-change: left;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.x-old-slider--thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: currentColor;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.x-old-slider--thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.3;
  -webkit-transform: translate(-50%, -50%) scale(0.1);
          transform: translate(-50%, -50%) scale(0.1);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
.x-old-slider--thumb-container:hover .x-old-slider--thumb::after {
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}
.x-old-slider--thumb-container.active .x-old-slider--thumb::after {
  -webkit-transform: translate(-50%, -50%) scale(1.5);
          transform: translate(-50%, -50%) scale(1.5);
}
.x-old-slider--thumb-label-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  bottom: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  background-color: currentColor;
  font-size: 14px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
}
.x-old-slider--thumb-label {
  color: white;
  -webkit-transform: rotate(45deg) translateZ(0);
          transform: rotate(45deg) translateZ(0);
}