@layer m3-components{.m3-slider{--_track:16px;--_r-out:8px;--_handle-h:44px;--_handle-w:4px;--_gap:6px;--_r-in:2px;--_stop:4px;--_inset:6px;--_bubble-h:40px;--_bubble-w:48px;--_ctl:max(var(--_handle-h), var(--md-sys-size-touch));--_active:var(--md-sys-color-primary);--_inactive:var(--md-sys-color-secondary-container);--_handle:var(--md-sys-color-primary);--_stop-on:var(--md-sys-color-on-primary);--_stop-off:var(--md-sys-color-on-secondary-container);--_hx:calc(var(--_inset) + (100% - 2 * var(--_inset)) * var(--_p));gap:var(--md-sys-space-half);width:100%;min-width:0;color:var(--md-sys-color-on-surface);display:grid}.m3-slider[data-size=s]{--_track:24px;--_r-out:8px}.m3-slider[data-size=m]{--_track:40px;--_r-out:12px}.m3-slider__head{justify-content:space-between;align-items:baseline;gap:var(--md-sys-gap-inline);display:flex}.m3-slider__readout{color:var(--md-sys-color-on-surface-variant)}.m3-slider__control{height:var(--_ctl);min-width:120px;position:relative}.m3-slider__control>*{position:absolute}.m3-slider__input{opacity:0;z-index:2;cursor:pointer;appearance:none;touch-action:pan-y;background:0 0;width:100%;height:100%;margin:0;padding:0;position:absolute;inset:0}.m3-slider__input::-webkit-slider-runnable-track{-webkit-appearance:none;background:0 0;border:0;height:100%}.m3-slider__input::-moz-range-track{background:0 0;border:0;height:100%}.m3-slider__input::-webkit-slider-thumb{appearance:none;width:calc(2 * var(--_inset));height:var(--_ctl);background:0 0;border:0;border-radius:0}.m3-slider__input::-moz-range-thumb{width:calc(2 * var(--_inset));height:var(--_ctl);background:0 0;border:0;border-radius:0}.m3-slider__input:disabled{cursor:not-allowed}.m3-slider__track{top:calc(50% - var(--_track) / 2);height:var(--_track);pointer-events:none}.m3-slider__track[data-part=active]{width:max(0px,var(--_hx) - var(--_handle-w) / 2 - var(--_gap));background:var(--_active);border-radius:var(--_r-out) var(--_r-in) var(--_r-in) var(--_r-out);left:0}.m3-slider__track[data-part=inactive]{left:calc(var(--_hx) + var(--_handle-w) / 2 + var(--_gap));background:var(--_inactive);border-radius:var(--_r-in) var(--_r-out) var(--_r-out) var(--_r-in);right:0}.m3-slider__stops{pointer-events:none;color:canvastext;--_cut-a:calc(var(--_hx) - var(--_handle-w) / 2 - var(--_gap));--_cut-b:calc(var(--_hx) + var(--_handle-w) / 2 + var(--_gap));-webkit-mask-image:linear-gradient(to right,currentColor var(--_cut-a),transparent var(--_cut-a),transparent var(--_cut-b),currentColor var(--_cut-b));-webkit-mask-image:linear-gradient(to right,currentColor var(--_cut-a),transparent var(--_cut-a),transparent var(--_cut-b),currentColor var(--_cut-b));mask-image:linear-gradient(to right,currentColor var(--_cut-a),transparent var(--_cut-a),transparent var(--_cut-b),currentColor var(--_cut-b));inset:0}.m3-slider__stop{top:calc(50% - var(--_stop) / 2);width:var(--_stop);height:var(--_stop);left:calc(var(--_inset) + (100% - 2 * var(--_inset)) * var(--_f) - var(--_stop) / 2);background:var(--_stop-off);border-radius:50%;position:absolute}.m3-slider__stop[data-on]{background:var(--_stop-on)}.m3-slider__handle{left:var(--_hx);top:calc(50% - var(--_handle-h) / 2);height:var(--_handle-h);width:var(--_handle-w);border-radius:var(--md-sys-shape-corner-full);background:var(--_handle);pointer-events:none;transition:width var(--md-sys-motion-t-micro),background-color var(--md-sys-motion-t-fx-micro);translate:-50%}.m3-slider__input:active~.m3-slider__handle{width:calc(var(--_handle-w) / 2)}.m3-slider__input:focus-visible~.m3-slider__handle{outline:var(--md-sys-focus-width) solid var(--md-sys-focus-color);outline-offset:var(--md-sys-focus-offset)}.m3-slider__bubble{left:var(--_hx);bottom:calc(50% + 12px + var(--_handle-h) / 2);z-index:3;pointer-events:none;min-width:var(--_bubble-w);height:var(--_bubble-h);padding-inline:var(--md-sys-space-3);border-radius:var(--md-sys-shape-corner-full);background:var(--md-sys-color-inverse-surface);color:var(--md-sys-color-inverse-on-surface);white-space:nowrap;transform-origin:50% 100%;opacity:0;translate:-50%;transform:translateY(calc(8px * var(--md-sys-motion-travel))) scale(calc(1 - .6 * var(--md-sys-motion-travel)));transition:transform var(--md-sys-motion-t-micro-out),opacity var(--md-sys-motion-t-fx-micro);place-items:center;display:grid}.m3-slider__input:is(:active,:focus-visible)~.m3-slider__bubble{opacity:1;transition:transform var(--md-sys-motion-t-micro),opacity var(--md-sys-motion-t-fx-micro);transform:none}.m3-slider[data-disabled]{color:color-mix(in srgb,var(--md-sys-color-on-surface) 38%,transparent);--_active:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);--_inactive:color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);--_handle:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);--_stop-on:var(--md-sys-color-surface);--_stop-off:color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent)}.m3-slider[data-disabled] .m3-slider__readout{color:inherit}@media (forced-colors:active){.m3-slider__handle,.m3-slider__track[data-part=active]{background:highlight}.m3-slider__track[data-part=inactive]{background:graytext}}}@layer m3-density{:root[data-density=compact] .m3-slider{--_track:12px;--_r-out:6px;--_handle-h:32px;--_inset:5px;--_bubble-h:32px;--_bubble-w:40px}:root[data-density=compact] .m3-slider[data-size=s]{--_track:20px;--_r-out:8px}:root[data-density=compact] .m3-slider[data-size=m]{--_track:32px;--_r-out:10px;--_handle-h:40px}}