@layer components{.slider-label{flex-direction:column;gap:.5rem;width:100%;display:flex}.slider-label[data-side=left]{flex-direction:row;align-items:center}.slider-container{--thumb-size:1.25rem;--track-height:.375rem;--percent:0;--content:"";--steps:10;--tick-color:var(--fg);width:100%;height:var(--thumb-size);align-items:center;display:grid;position:relative}.slider{z-index:1;appearance:none;cursor:pointer;opacity:0;width:100%;margin:0;position:absolute;inset:0}.slider::-webkit-slider-thumb{appearance:none;width:var(--thumb-size);height:var(--thumb-size)}.slider::-moz-range-thumb{width:var(--thumb-size);height:var(--thumb-size);border:0}.slider-track{height:var(--track-height);background:linear-gradient(to right, var(--add-hard-color) calc(var(--percent) * 100%), var(--fg2) 0);border-radius:999px}[data-tick=true]:after{content:"";height:calc(var(--track-height) + .125rem);background:linear-gradient(to right, var(--tick-color) 0, var(--tick-color) 1.5px, transparent 1.5px) left / 100% 100% no-repeat, repeating-linear-gradient(to right, transparent 0, transparent calc(100% / var(--steps) - 1.5px), var(--tick-color) calc(100% / var(--steps) - 1.5px), var(--tick-color) calc(100% / var(--steps)));top:50%;margin-inline:.625rem;position:absolute;inset-inline:0;transform:translateY(-50%)}[data-thumb]{left:calc(var(--percent) * (100% - var(--thumb-size)));width:var(--thumb-size);height:var(--thumb-size);background:var(--fg);pointer-events:none;border-radius:50%;transition:scale .3s ease-in-out,background-color .3s ease-in-out,box-shadow .2s ease-in-out;position:absolute;box-shadow:0 1px 4px #00000059}.slider:enabled:active~[data-thumb],.slider:enabled:focus-visible~[data-thumb]{background-color:var(--add-total-color);box-shadow:0 0 3px 8px var(--add-mid-color);scale:1.1}.slider:enabled:hover~[data-thumb]{background-color:var(--add-mid2-color);scale:1.1}.slider:disabled{cursor:not-allowed}.slider:disabled~[data-thumb]{background-color:var(--bgE-disabled)}.slider:disabled~.slider-track{opacity:.5}[data-thumb=always]:before,[data-thumb=hover]:before{content:var(--content);background-color:var(--bgE);max-width:5rem;color:var(--fg);text-overflow:ellipsis;white-space:nowrap;opacity:0;border-radius:.25rem;padding:.25rem .5rem;font-size:.875rem;font-weight:400;transition:opacity .15s ease-in-out;position:absolute;top:-2rem;left:50%;transform:translate(-50%)}[data-thumb=always]:after,[data-thumb=hover]:after{content:"";border-color:var(--bgE) transparent transparent transparent;opacity:0;border-style:solid;border-width:8px;transition:opacity .15s ease-in-out;position:absolute;bottom:65%;left:50%;transform:translate(-50%)}[data-thumb=always]:before,[data-thumb=always]:after,.slider:enabled:hover~[data-thumb=hover]:before,.slider:enabled:focus-visible~[data-thumb=hover]:before,.slider:enabled:focus-within~[data-thumb=hover]:before,.slider:enabled:hover~[data-thumb=hover]:after,.slider:enabled:focus-visible~[data-thumb=hover]:after,.slider:enabled:focus-within~[data-thumb=hover]:after{opacity:1}}
