@layer components{input[type=range]{--range-track-color: var(--background1);--range-thumb-color: var(--foreground2);--range-thumb-color-focus: var(--foreground0);--range-track-height: 2px;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;outline:none;min-width:20ch;height:1lh;font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height);position:relative}input[type=range]::-webkit-slider-runnable-track{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:100%;height:var(--range-track-height);background:var(--range-track-color);border:none;outline:none}input[type=range]::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:1ch;height:1lh;background:transparent;border:1px solid var(--range-thumb-color);border-radius:0;box-sizing:border-box;position:relative;top:50%;transform:translateY(-50%)}input[type=range]:not(:disabled):focus::-webkit-slider-thumb,input[type=range]:not(:disabled):active::-webkit-slider-thumb{background:var(--range-thumb-color-focus);border:none}input[type=range]::-moz-range-track{width:100%;height:var(--range-track-height);background:var(--range-track-color);border:none;outline:none}input[type=range]::-moz-range-thumb{width:1ch;height:1lh;background:transparent;border:1px solid var(--range-thumb-color);border-radius:0;box-sizing:border-box}input[type=range]:not(:disabled):focus::-moz-range-thumb,input[type=range]:not(:disabled):active::-moz-range-thumb{background:var(--range-thumb-color-focus);border:none}input[type=range]:disabled{--range-track-color: var(--background2);--range-thumb-color: var(--foreground2);pointer-events:none;opacity:.6}input[type=range][bar-=thick]{--range-track-height: 1lh}input[type=range][bar-=thick]::-webkit-slider-thumb{height:1lh}input[type=range][bar-=thick]::-moz-range-thumb{height:1lh}input[type=range][bar-=line]{--range-track-height: 1px}label:has(input[type=range]){display:inline-flex;align-items:center;gap:1ch;max-width:fit-content}label:has(input[type=range]:focus){font-weight:700;text-decoration:underline}label:has(input[type=range]:disabled){color:var(--foreground2);text-decoration:line-through}}