:root{--default-grid-pixels:8px;--default-header-height:64px}.input-multirange{-webkit-user-select:none;user-select:none;outline:0;height:24px;margin:0;padding:0;position:relative}.input-multirange.has-span{height:40px}.input-multirange>label{z-index:1;color:hsla(var(--comp-typo-secondary), 1);-webkit-user-select:none;user-select:none}.input-multirange>label.right{float:right;text-align:right}.input-multirange>label.step{position:absolute;transform:translate(-50%)}.input-multirange>span{color:hsla(var(--comp-typo-secondary), 1);margin-top:28px;font-size:1.2rem;transition:color .3s;display:block}.input-multirange>span:empty:before{content:"​"}.input-multirange .tracks{z-index:2;pointer-events:none;width:100%;height:8px;position:absolute;top:12px;left:0;transform:translateY(-50%)}.input-multirange .tracks *{border-radius:var(--default-border-radius);width:100%;height:100%;margin:0;padding:0;display:block;position:absolute;top:0;left:0}.input-multirange .tracks .track{z-index:1;background:hsla(var(--comp-secondary-light3), 1);will-change:background;transition:background .3s}.input-multirange .tracks .fill{z-index:2;background:hsla(var(--comp-secondary), 1);transition:background .3s}.input-multirange .thumb{background:hsla(var(--comp-bright), 1);width:24px;height:24px;-webkit-box-shadow:0 0 4px hsla(var(--comp-dark), .5);box-shadow:0 0 4px hsla(var(--comp-dark), .5);cursor:pointer;pointer-events:all;will-change:box-shadow;z-index:3;border:0;border-radius:50%;outline:0;margin:0;padding:0;transition:box-shadow .3s,background .3s;position:absolute;top:0}.input-multirange .thumb::-moz-focus-inner{border:0}.input-multirange .thumb:focus,.input-multirange .thumb:hover{-webkit-box-shadow:0 0 7px hsla(var(--comp-dark), .5);box-shadow:0 0 7px hsla(var(--comp-dark), .5);animation:.3s blip}.input-multirange .thumb:focus~.tracks .track,.input-multirange .thumb:hover~.tracks .track{background-color:hsla(var(--comp-secondary-light2), 1)}.input-multirange .thumb:focus~.popup,.input-multirange .thumb:hover~.popup{transform:translate(-50%,-100%)scale(1)}.input-multirange.labeled{height:40px}.input-multirange.labeled.has-span{height:56px}.input-multirange.labeled .tracks{margin-top:16px}.input-multirange.labeled .thumb{top:16px}.input-multirange .popup{--offset-pct:-50%;--offset-norm:0;z-index:100;transform-origin:50% 100%;will-change:transform;-webkit-user-select:none;user-select:none;transition:transform .3s;position:absolute;left:0;transform:translate(-50%,-100%)scale(0)}.input-multirange .popup.focused{z-index:101}.input-multirange .popup:focus,.input-multirange .popup:hover{transform:translate(-50%,-90%)scale(1)}.input-multirange:hover .tracks .track,.input-multirange:focus .tracks .track,.input-multirange.focused .tracks .track{background-color:hsla(var(--comp-secondary-light2), 1)}.input-multirange:hover .popup,.input-multirange:focus .popup,.input-multirange.focused .popup{transform:translate(-50%,-90%)scale(1)}.input-multirange.primary .fill{background:hsla(var(--comp-primary-light2), 1)}.input-multirange.primary .thumb{background:hsla(var(--comp-primary-dark2), 1)}.input-multirange.primary .thumb:focus{-webkit-box-shadow:0 0 7px hsla(var(--comp-primary-dark2), .5);box-shadow:0 0 7px hsla(var(--comp-primary-dark2), .5)}.input-multirange.primary .thumb:focus+.popup{transform:translate(-50%,-100%)scale(1)}.input-multirange.invalid .tracks .track{background:hsla(var(--comp-error), .2)!important}.input-multirange.invalid .tracks .fill{background:hsla(var(--comp-error), 1)!important}.input-multirange.invalid .thumb{background:hsla(var(--comp-error), 1)}.input-multirange.invalid>span,.input-multirange.invalid>label{color:hsla(var(--comp-error), 1)}
