.prs-range {
  --range-fill: var(--prs-c-primary);
  --range-size: 100rem;
  --range-offset: 0.6rem;
  appearance: none;
  border: 0 none;
  width: 100%;
  height: 1rem;
  background: transparent;
  display: block;
  overflow: hidden;
  cursor: pointer;
  border-radius: 9999px;
}

.prs-range::-webkit-slider-runnable-track {
  appearance: none;
  width: 100%;
  height: 0.5rem;
  background-color: var(--prs-c-gray-300);
  align-items: center;
  border-radius: 9999px;
}

.prs-range::-moz-range-track {
  appearance: none;
  width: 100%;
  height: 0.5rem;
  background-color: var(--prs-c-gray-300);
  align-items: center;
  border-radius: 9999px;
}

.prs-range::-webkit-slider-thumb {
  appearance: none;
  border-style: none;
  width: 1rem;
  height: 1rem;
  background-color: var(--prs-c-white);
  color: var(--range-fill);
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 9999px;
  box-shadow: 0 0 0 3px var(--range-fill) inset, 0 0, calc(var(--range-size) * -1 - var(--range-offset)) 0 0 var(--range-size);
  transition-property: var(--prs-transition-property);
  transition-timing-function: var(--prs-transition-timing);
  transition-duration: var(--prs-transition-duration);
}

.prs-range::-moz-range-thumb {
  --range-offset: 0.5rem;
  appearance: none;
  border-style: none;
  width: 1rem;
  height: 1rem;
  background-color: var(--prs-c-white);
  color: var(--range-fill);
  position: relative;
  top: 50%;
  border-radius: 9999px;
  box-shadow: 0 0 0 3px var(--range-fill) inset, 0 0, calc(var(--range-size) * -1 - var(--range-offset)) 0 0 var(--range-size);
  transition-property: var(--prs-transition-property);
  transition-timing-function: var(--prs-transition-timing);
  transition-duration: var(--prs-transition-duration);
}

.prs-range-secondary {
  --range-fill: var(--prs-c-secondary);
}

.prs-range-accent {
  --range-fill: var(--prs-c-accent);
}

.prs-range-info {
  --range-fill: var(--prs-c-info);
}

.prs-range-success {
  --range-fill: var(--prs-c-success-700);
}

.prs-range-warning {
  --range-fill: var(--prs-c-warning-700);
}

.prs-range-danger {
  --range-fill: var(--prs-c-danger);
}

.prs-range:focus-visible,.prs-range:where(.prs-range_focus) {
  outline: 2px solid var(--range-fill);
  outline-offset: 1px;
}

.prs-range:disabled {
  --range-fill: var(--prs-c-gray-400);
  background-color: transparent;
  cursor: not-allowed;
}