.range::-webkit-slider-thumb {
  appearance: none;
  background: var(--color-surface-inverted);
  border: none;
  border-radius: var(--radius-full);
  height: var(--spacing-md);
  pointer-events: auto;
  width: var(--spacing-md);
}

.range::-moz-range-thumb {
  appearance: none;
  background: var(--color-surface-inverted);
  border: none;
  border-radius: var(--radius-full);
  height: var(--spacing-md);
  pointer-events: auto;
  width: var(--spacing-md);
}

.range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--color-ring-primary);
  outline: 2px solid var(--color-outline-accent);
  outline-offset: -2px;
}

.range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px var(--color-ring-primary);
  outline: 2px solid var(--color-outline-accent);
  outline-offset: -2px;
}