.x-slider {
  --slider-thumb-size: calc(var(--slider-track-size) + var(--space-1));
  --slider-fill-color: var(--accent-9);
  height: var(--slider-thumb-size);
  appearance: auto;
  accent-color: var(--slider-fill-color);
  cursor: var(--cursor-slider-thumb);
}

.x-slider:where([data-disabled], :disabled) {
  --slider-fill-color: var(--neutral-a6);
  opacity: .5;
  cursor: var(--cursor-disabled);
}

.x-slider:where(:focus-visible) {
  outline: 2px solid var(--focus-8);
  outline-offset: 2px;
}

.x-slider::-webkit-slider-runnable-track {
  height: var(--slider-track-size);
  border-radius: max(calc(var(--slider-track-size) / 3), var(--radius-thumb));
}

.x-slider::-webkit-slider-thumb {
  appearance: none;
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  box-shadow: var(--slider-thumb-shadow);
  cursor: var(--cursor-slider-thumb);
  background-color: #fff;
  background-image: none;
  border: 0;
  border-radius: 50%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.x-slider:where(:active)::-webkit-slider-thumb {
  cursor: var(--cursor-slider-thumb-active);
}

.x-slider::-moz-range-track {
  height: var(--slider-track-size);
  background-color: var(--slider-track-bg);
  border-radius: max(calc(var(--slider-track-size) / 3), var(--radius-thumb));
  box-shadow: var(--slider-track-shadow, none);
}

.x-slider::-moz-range-progress {
  height: var(--slider-track-size);
  background-color: var(--slider-fill-color);
  border-radius: max(calc(var(--slider-track-size) / 3), var(--radius-thumb));
}

.x-slider::-moz-range-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  box-shadow: var(--slider-thumb-shadow);
  cursor: var(--cursor-slider-thumb);
  background-color: #fff;
  border: 0;
  border-radius: 50%;
}

.x-slider:where(:active)::-moz-range-thumb {
  cursor: var(--cursor-slider-thumb-active);
}

.x-slider:where([data-size="1"]) {
  --slider-track-size: calc(var(--space-2) * .75);
}

.x-slider:where([data-size="2"]) {
  --slider-track-size: var(--space-2);
}

.x-slider:where([data-size="3"]) {
  --slider-track-size: calc(var(--space-2) * 1.25);
}

.x-slider:where(:not([data-size])) {
  --slider-track-size: var(--space-2);
}

.x-slider:where(:not([data-variant="soft"])) {
  --slider-track-bg: var(--neutral-a3);
  --slider-track-shadow: inset 0 0 0 1px var(--neutral-a5);
  --slider-thumb-shadow: 0 0 0 1px var(--black-a4);
  --slider-fill-color: var(--accent-9);
}

.x-slider:where([data-variant="soft"]) {
  --slider-track-bg: var(--neutral-a4);
  --slider-thumb-shadow: 0 0 0 1px var(--black-a3), 0 0 0 1px var(--neutral-a2),
    0 0 0 1px var(--accent-a2), 0 1px 2px var(--neutral-a4),
    0 1px 3px -.5px var(--neutral-a3);
  --slider-fill-color: var(--accent-a8);
}