.slider {
  width: 100%;
  height: 18px;
  appearance: none;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.slider::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    to right,
    var(--accent) 0 var(--slider-value),
    var(--context-track-bg) var(--slider-value) 100%
  );
}

.slider::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -5.5px;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--line-strong) 60%, transparent);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  box-shadow: var(--shadow-control);
}

.slider::-moz-range-track {
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--context-track-bg);
}

.slider::-moz-range-progress {
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 60%, transparent);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  box-shadow: var(--shadow-control);
}

.slider:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 3px var(--ring),
    var(--shadow-control);
}

.slider:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0 0 3px var(--ring),
    var(--shadow-control);
}

.slider:disabled {
  cursor: default;
  opacity: 0.48;
}
