.price-range{--knob:1.5rem;--track-y:1.1rem;height:3rem;position:relative}.price-range-value{color:var(--mute);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;font-size:.75rem;font-weight:500;line-height:1rem;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.price-range:before,.price-range:after{content:"";top:var(--track-y);pointer-events:none;border-radius:999px;height:4px;position:absolute;transform:translateY(-50%)}.price-range:before{left:calc(var(--knob) / 2);right:calc(var(--knob) / 2);background:color-mix(in oklab, var(--fg) 12%, transparent);box-shadow:inset 0 1px 1px #0000001f}.price-range:after{--span:calc(100% - var(--knob));left:calc(var(--knob) / 2 + var(--span) * var(--from));width:calc(var(--span) * (var(--to) - var(--from)));background:linear-gradient(90deg,#3d3b45,#17161c)}.price-range input[type=range]{top:calc(var(--track-y) - var(--knob) / 2);z-index:1;width:100%;height:var(--knob);appearance:none;pointer-events:none;background:0 0;margin:0;position:absolute;left:0}.price-range input[type=range]::-webkit-slider-runnable-track{height:var(--knob);background:0 0;border:0}.price-range input[type=range]::-moz-range-track{height:var(--knob);background:0 0;border:0}.price-range input[type=range]::-webkit-slider-thumb{appearance:none;width:var(--knob);height:var(--knob);cursor:grab;pointer-events:auto;background:radial-gradient(circle at 35% 30%,#fff 0%,#e4e4ea 38%,#a9a9b3 72%,#8a8a95 100%);border:1px solid #0000002e;border-radius:50%;box-shadow:0 2px 5px #14122b47,inset 0 1px 1px #ffffffe6}.price-range input[type=range]::-moz-range-thumb{width:var(--knob);height:var(--knob);cursor:grab;pointer-events:auto;background:radial-gradient(circle at 35% 30%,#fff 0%,#e4e4ea 38%,#a9a9b3 72%,#8a8a95 100%);border:1px solid #0000002e;border-radius:50%;box-shadow:0 2px 5px #14122b47,inset 0 1px 1px #ffffffe6}.price-range input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}.price-range input[type=range]:focus{outline:none}.price-range input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent), 0 2px 5px #14122b47}.price-range input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent), 0 2px 5px #14122b47}
