:root{--z-slider-height:3em;--z-slider-rail-size:.4em;--z-slider-button-size:1.4em;--z-slider-color:var(--z-color-primary);--z-slider-padding:calc(.5 * (var(--z-slider-button-size) - var(--z-slider-rail-size)))}.z-slider{position:relative;padding:var(--z-slider-padding);cursor:pointer}.z-slider.z-disabled{--z-slider-color:#aaa !important}.z-slider.z-disabled .z-slider__rail{cursor:default}.z-slider.z-vertical .z-slider__rail{width:var(--z-slider-rail-size);height:200px}.z-slider.z-vertical .z-slider__marks{position:absolute;left:2em;top:var(--z-slider-padding);bottom:var(--z-slider-padding);width:auto;height:auto;margin:0}.z-slider.z-vertical .z-slider-mark{left:0;transform:translateY(50%)}.z-slider__rail{position:relative;height:var(--z-slider-rail-size);background-color:#0000000d;border-radius:10em}.z-slider__bar{position:absolute;width:100%;height:100%;background-color:var(--z-slider-color);border-radius:inherit;transition:background-color .5s}.z-slider-button{position:absolute;width:var(--z-slider-button-size);height:var(--z-slider-button-size);bottom:50%;left:50%;transform:translate(-50%,50%);-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2}.z-slider-button>b{display:block;height:100%;background-color:#fff;border:var(--z-slider-color) solid var(--z-slider-rail-size);border-radius:100%;transition:transform .2s,border-width .2s}.z-slider-button .z-tooltip{position:absolute;left:50%;bottom:calc(var(--z-slider-button-size) * 1.5);text-align:center;white-space:nowrap;transform:translate(-50%)}.z-slider:not(.z-disabled) .z-slider-button.z-dragging>b,.z-slider:not(.z-disabled) .z-slider-button:focus>b,.z-slider:not(.z-disabled) .z-slider-button:hover>b{border-width:2px;transform:scale(1.2)}.z-slider:not(.z-disabled) .z-slider-button:hover>b{cursor:grab}.z-slider:not(.z-disabled) .z-slider-button.z-dragging>b{cursor:grabbing}.z-slider__marks{position:relative;height:1em;margin-top:calc(var(--z-spacing) * .7);text-align:center}.z-slider-mark{position:absolute;font-size:.7em;bottom:50%;left:50%;white-space:nowrap;transform:translate(-50%,50%)}.z-slider-mark .z-slider__tick{position:absolute;left:50%;top:-.3em;height:.3em;width:1px;background:#0004}