smart-webcomponents/source/styles/components/smart.slider.css

Web Components & Custom Elements for Professional Web Applications

.smart-tank:focus,smart-slider:focus{outline:0}smart-slider.smart-element,smart-tank.smart-element{border:none;background:0 0;overflow:visible}.smart-tank[labels-visibility=endPoints] .smart-label-middle,.smart-tank[labels-visibility=none] .smart-label,smart-slider[labels-visibility=endPoints] .smart-label-middle,smart-slider[labels-visibility=none] .smart-label{visibility:hidden}.smart-tank *,smart-slider *{box-sizing:border-box}.smart-tank .smart-label,smart-slider .smart-label{font-family:inherit;font-size:inherit;white-space:nowrap;color:var(--smart-background-color);float:left}smart-tank{padding-left:5px;padding-right:5px;width:var(--smart-tank-default-width);height:var(--smart-tank-default-height)}smart-tank.smart-scale-far .smart-tick{top:initial}smart-slider .smart-container{overflow:visible}smart-slider .smart-scale{position:relative;user-select:none;pointer-events:none}smart-slider .smart-label{position:absolute}smart-slider .smart-tooltip{z-index:1}smart-slider .smart-tooltip-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}smart-slider .smart-track-container{touch-action:none}smart-slider .smart-track-ticks-container{position:absolute;width:100%;height:100%;pointer-events:none}smart-slider[ticks-visibility=major] .smart-tick,smart-slider[ticks-visibility=major] .smart-tick-minor,smart-slider[ticks-visibility=none] .smart-tick,smart-slider[ticks-visibility=none] .smart-tick-minor{display:none}.smart-tank .smart-container{overflow:visible}.smart-tank .smart-track{height:100%;width:calc(100% - var(--smart-tank-scale-size) - 4px);min-width:var(--smart-tank-minimum-track-size);position:relative;border:var(--smart-border) solid;border-width:var(--smart-border-width);background-color:var(--smart-background);float:left;border-top-left-radius:var(--smart-border-top-left-radius);border-bottom-left-radius:var(--smart-border-bottom-left-radius);border-top-right-radius:var(--smart-border-top-right-radius);border-bottom-right-radius:var(--smart-border-bottom-right-radius);touch-action:none;margin:0 2px}.smart-tank .smart-track.track-hovered{cursor:pointer}.smart-tank .smart-track-ticks-container{position:absolute;width:100%;height:100%;pointer-events:none}.smart-tank .smart-value{width:100%;height:0;background-color:var(--smart-primary);border-color:var(--smart-primary);position:absolute}.smart-tank .smart-label{position:absolute}.smart-tank .smart-thumb{display:none;position:absolute;width:var(--smart-tank-thumb-width);height:var(--smart-tank-thumb-height);transform:scale(0);transition:transform .2s ease-out;left:calc(-1 * var(--smart-tank-thumb-width) * 2);top:calc(-1 * var(--smart-tank-thumb-height)/ 2);border-radius:50%;background-color:var(--smart-primary)}.smart-tank .smart-thumb:before{transform:scale(1.1) rotate(45deg);border:1px solid var(--smart-primary);border-radius:50% 0 50% 50%;background-color:var(--smart-primary);width:100%;height:100%;display:block;content:""}.smart-tank .smart-thumb-label-container{overflow:hidden;text-overflow:ellipsis;width:var(--smart-tank-thumb-width);height:var(--smart-tank-thumb-height);position:absolute;top:0;left:0}.smart-tank .smart-scale{position:relative;user-select:none;pointer-events:none;float:left;margin-top:var(--smart-border-width);margin-left:initial;height:calc(100% - var(--smart-border-width));width:var(--smart-tank-scale-size);max-width:calc(100% - var(--smart-tank-minimum-track-size) - 4px)}.smart-tank .smart-scale-near .smart-tick{bottom:initial;right:0}.smart-tank .smart-scale-near .smart-label{bottom:initial;right:calc(var(--smart-tank-tick-size) + 2px)}.smart-tank .smart-scale-far .smart-label{left:calc(var(--smart-tank-tick-size) + 2px);top:initial}.smart-tank .smart-tooltip{position:absolute;display:flex;align-items:center;justify-content:center;border:1px solid var(--smart-border);width:var(--smart-tank-tooltip-width);height:var(--smart-tank-tooltip-height);padding:5px;background-color:var(--smart-background);color:var(--smart-background-color);opacity:.7;left:calc(-1 * var(--smart-tank-tooltip-width) - 10.5px);top:calc(-1 * var(--smart-tank-tooltip-height)/ 2);z-index:1}.smart-tank .smart-tooltip.smart-hidden,.smart-tank:not([animation=none])[disabled] .bubble,.smart-tank:not([animation=none])[inverted] .bubble,.smart-tank:not([animation=none])[orientation=horizontal] .bubble,.smart-tank[ticks-visibility=major] .smart-tick,.smart-tank[ticks-visibility=major] .smart-tick-minor,.smart-tank[ticks-visibility=none] .smart-tick,.smart-tank[ticks-visibility=none] .smart-tick-minor{display:none}.smart-tank .smart-tooltip:before{content:"";width:0;height:0;border-right:none;border-left:6px solid var(--smart-border);border-top:6px solid transparent;border-bottom:6px solid transparent;position:absolute;top:calc(50% - 6px);right:-7px;left:auto}.smart-tank .smart-tooltip-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.smart-tank .smart-tick{position:absolute;background-color:var(--smart-background-color);float:initial;width:var(--smart-tank-tick-size);height:1px}.smart-tank .smart-tick-minor{width:var(--smart-tank-minor-tick-size);height:1px}.smart-tank:focus .smart-track{border-style:solid;border-color:var(--smart-outline);border-width:var(--smart-border-width)}.smart-tank:active .smart-track{cursor:n-resize}.smart-tank:not([animation=none]) .smart-value{transition:height .15s ease-out,margin-top .15s ease-out}.smart-tank:not([animation=none]) .smart-value.disable-animation{transition:none}.smart-tank:not([animation=none]) .smart-bubble-container{position:relative;overflow:hidden;touch-action:none;width:100%;height:100%;user-select:none}.smart-tank:not([animation=none]) .bubble{user-select:none;pointer-events:none;border-radius:50%;box-shadow:0 10px 20px rgba(0,0,0,.2),inset 0 10px 25px 5px #fff;width:50px;height:50px}.smart-tank:not([animation=none]) .bubble1{left:10%;top:40%;animation:animateBubble 12.5s linear infinite,sideWays 5s ease-in-out infinite alternate;transform:scale(.25)}.smart-tank:not([animation=none]) .bubble2{left:5%;top:35%;animation:animateBubble 15s linear infinite,sideWays 4.5s ease-in-out infinite alternate;transform:scale(.2)}.smart-tank:not([animation=none]) .bubble3{left:0;top:50%;animation:animateBubble 10s linear infinite,sideWays 7s ease-in-out infinite alternate;transform:scale(.3)}.smart-tank:not([animation=none]) .bubble4{left:10%;top:60%;animation:animateBubble 7s linear infinite,sideWays 11s ease-in-out infinite alternate;transform:scale(.275)}.smart-tank:not([animation=none]) .bubble5{left:8%;top:70%;animation:animateBubble 14.5s linear infinite,sideWays 8s ease-in-out infinite alternate;transform:scale(.35)}.smart-tank[disabled] .smart-track.track-hovered,.smart-tank[disabled]:active .smart-track,.smart-tank[readonly] .smart-track.track-hovered,.smart-tank[readonly]:active .smart-track{cursor:default}.smart-tank[inverted] .smart-thumb{top:calc(100% - var(--smart-tank-thumb-height)/ 2);margin-left:initial;margin-top:initial}.smart-tank[inverted] .smart-tooltip{left:calc(-1 * var(--smart-tank-tooltip-width) - 10.5px);top:calc(100% - 1 * var(--smart-tank-tooltip-height)/ 2)}.smart-tank[inverted]:focus .smart-thumb{top:calc(100% - var(--smart-tank-thumb-height)/ 2)}.smart-tank[inverted][tooltip-position=far] .smart-tooltip{top:calc(100% - var(--smart-tank-tooltip-height)/ 2)}.smart-tank[inverted][tooltip-position=far][scale-position=none] .smart-tooltip{left:calc(-100% - 7px)}.smart-tank[inverted][tooltip-position=near] .smart-tooltip{left:calc(-1 * var(--smart-tank-tooltip-width) - 10.5px);top:calc(100% - var(--smart-tank-tooltip-height)/ 2)}.smart-tank[inverted][orientation=vertical] .smart-thumb{top:calc(100% - var(--smart-tank-thumb-height)/ 2)}.smart-tank[ticks-visibility=none] .smart-scale-near .smart-label{right:2px}.smart-tank[ticks-visibility=none] .smart-scale-far .smart-label{left:2px;top:initial}.smart-tank[ticks-position=track] .smart-tick{width:100%}.smart-tank[ticks-position=track] .smart-tick-minor{width:80%;left:50%;transform:translateX(-50%)}.smart-tank[ticks-position=track] .smart-scale-near .smart-label{right:2px}.smart-tank[ticks-position=track] .smart-scale-far .smart-label{left:2px;top:initial}.smart-tank[tooltip-position=far] .smart-tooltip{left:calc(100% + 10.5px);top:calc(-1 * var(--smart-tank-tooltip-height)/ 2)}.smart-tank[tooltip-position=far] .smart-tooltip:before{border-left:none;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--smart-border);top:calc(50% - 6px);left:-7px}.smart-tank[show-thumb-label] .smart-thumb{left:calc(-1 * var(--smart-tank-thumb-width)/ 2);overflow:visible;display:initial}.smart-tank[show-thumb-label] .smart-thumb-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.65rem;font-family:var(--smart-font-family);user-select:none;color:var(--smart-background-color)}.smart-tank[show-thumb-label]:focus .smart-thumb{left:calc(-1 * var(--smart-tank-thumb-width) - var(--smart-tank-thumb-width)/ 2 - 2px);transform:scale(1)}.smart-tank[show-thumb-label]:not([animation=none]) .smart-thumb{transition:transform .2s ease-out,left .2s ease-in-out,top .2s ease-in-out}.smart-tank[show-thumb-label][thumb-label-position=far] .smart-thumb{left:calc(100% - var(--smart-tank-thumb-width)/ 2)}.smart-tank[show-thumb-label][orientation=horizontal] .smart-thumb{left:100%;top:calc(-1 * var(--smart-tank-thumb-width)/ 2)}.smart-tank[show-thumb-label][orientation=horizontal][inverted] .smart-thumb{left:calc(-1 * var(--smart-tank-thumb-width)/ 2)}.smart-tank[show-thumb-label][orientation=horizontal][thumb-label-position=far] .smart-thumb{left:100%;top:calc(100% - var(--smart-tank-thumb-width)/ 2)}.smart-tank[show-thumb-label][orientation=horizontal][thumb-label-position=far][inverted] .smart-thumb{left:calc(-1 * var(--smart-tank-thumb-width)/ 2)}.smart-tank[show-thumb-label][orientation=horizontal][thumb-label-position=near] .smart-thumb{left:100%;top:calc(-1 * var(--smart-tank-thumb-width)/ 2)}.smart-tank[thumb-label-position=far] .smart-thumb:before{border:1px solid var(--smart-primary);border-radius:50% 50% 50% 0}.smart-tank[thumb-label-position=far]:focus .smart-thumb{left:calc(100% + var(--smart-tank-thumb-width)/ 2 + 2px)}.smart-tank[scale-position=none] .smart-track{height:100%;width:100%;position:relative;border:var(--smart-border) solid;border-width:var(--smart-border-width);margin:0}.smart-tank[scale-position=none]:focus .smart-track{border-style:solid;border-color:var(--smart-outline);border-width:var(--smart-border-width)}.smart-tank[scale-position=none][tooltip-position=near] .smart-tooltip{top:calc(-1 * var(--smart-tank-tooltip-height)/ 2)}.smart-tank[scale-position=both] .smart-track{width:calc(100% - 2 * var(--smart-tank-scale-size) - 4px)}.smart-tank[scale-position=both] .smart-scale{width:var(--smart-tank-scale-size);height:100%;max-width:47%}.smart-tank[orientation=vertical][thumb-label-position=far] .smart-thumb:before{border:1px solid var(--smart-primary);border-radius:50% 50% 50% 0}.smart-tank[orientation=vertical]:not([animation=none]) .smart-value{transition:height .15s ease-out,margin-top .15s ease-out}.smart-tank[orientation=vertical]:not([animation=none]) .smart-value.disable-animation{transition:none}.smart-tank[orientation=horizontal]{padding-top:5px;padding-bottom:5px;padding-left:initial;padding-right:initial}.smart-tank[orientation=horizontal]:active .smart-track{cursor:w-resize}.smart-tank[orientation=horizontal] .smart-track{height:calc(100% - var(--smart-tank-scale-size) - 4px);min-height:var(--smart-tank-minimum-track-size);width:100%;background-color:transparent;margin-top:2px;margin-bottom:2px}.smart-tank[orientation=horizontal] .smart-value{height:100%;width:0}.smart-tank[orientation=horizontal] .smart-thumb{margin-left:calc(-1 * var(--smart-tank-thumb-width)/ 2)}.smart-tank[orientation=horizontal] .smart-thumb:before{border-radius:50% 50% 0}.smart-tank[orientation=horizontal] .smart-scale{width:100%;float:left;height:calc(var(--smart-tank-scale-size));margin-left:var(--smart-border-width)}.smart-tank[orientation=horizontal] .smart-scale-near .smart-tick{bottom:0;right:initial}.smart-tank[orientation=horizontal] .smart-scale-near .smart-label{bottom:calc(var(--smart-tank-tick-size) + 2px);right:initial}.smart-tank[orientation=horizontal] .smart-scale-far .smart-tick{top:0}.smart-tank[orientation=horizontal] .smart-scale-far .smart-label{top:calc(var(--smart-tank-tick-size) + 2px);left:initial}.smart-tank[orientation=horizontal] .smart-tooltip{top:calc(-1 * var(--smart-tank-tooltip-height) - 12px);left:calc(100% - var(--smart-tank-tooltip-width)/ 2)}.smart-tank[orientation=horizontal] .smart-tooltip:before{content:"";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--smart-border);position:absolute;top:100%;left:calc(var(--smart-tank-tooltip-width)/ 2 - 6px)}.smart-tank[orientation=horizontal] .smart-tick{float:left;width:1px;height:var(--smart-tank-tick-size)}.smart-tank[orientation=horizontal] .smart-tick-minor{height:var(--smart-tank-minor-tick-size);width:1px}.smart-tank[orientation=horizontal]:not([animation=none]) .smart-value{transition:width .15s ease-out,margin-left .15s ease-out}.smart-tank[orientation=horizontal]:not([animation=none]) .smart-value.disable-animation{transition:none}.smart-tank[orientation=horizontal][inverted] .smart-tooltip{top:calc(-1 * var(--smart-tank-tooltip-height) - 12px);left:calc(-1 * var(--smart-tank-tooltip-width)/ 2)}.smart-tank[orientation=horizontal][inverted]:focus .smart-thumb{left:calc(-1 * var(--smart-tank-thumb-width)/ 2)}.smart-tank[orientation=horizontal][inverted][tooltip-position=far] .smart-tooltip{left:calc(-1 * var(--smart-tank-tooltip-width)/ 2);top:calc(100% + 12px)}.smart-tank[orientation=horizontal][ticks-visibility=none] .smart-scale-near .smart-label{bottom:2px}.smart-tank[orientation=horizontal][ticks-visibility=none] .smart-scale-far .smart-label{top:2px;left:initial}.smart-tank[orientation=horizontal][ticks-position=track] .smart-tick{height:100%;width:1px}.smart-tank[orientation=horizontal][ticks-position=track] .smart-tick-minor{height:80%;top:50%;transform:translateY(-50%)}.smart-tank[orientation=horizontal][ticks-position=track] .smart-scale-near .smart-label{bottom:2px}.smart-tank[orientation=horizontal][ticks-position=track] .smart-scale-far .smart-label{top:2px;left:initial}.smart-tank[orientation=horizontal][tooltip-position=near][inverted] .smart-tooltip{top:calc(-1 * var(--smart-tank-tooltip-height) - 12px);left:calc(-1 * var(--smart-tank-tooltip-width)/ 2)}.smart-tank[orientation=horizontal][tooltip-position=far] .smart-tooltip{top:calc(100% + 12px);left:calc(100% - var(--smart-tank-tooltip-width)/ 2)}.smart-tank[orientation=horizontal][tooltip-position=far] .smart-tooltip:before{border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--smart-border);border-top:0;position:absolute;left:calc(var(--smart-tank-tooltip-width)/ 2 - 6px);top:-7px}.smart-tank[orientation=horizontal][show-thumb-label]:focus .smart-thumb{left:100%;top:calc(-1 * var(--smart-tank-thumb-height) - var(--smart-tank-thumb-height)/ 2 - 2px)}.smart-tank[orientation=horizontal][show-thumb-label][thumb-label-position=far]:focus .smart-thumb{top:calc(100% + var(--smart-tank-thumb-height)/ 2)}.smart-tank[orientation=horizontal][thumb-label-position=far] .smart-thumb:before{border-radius:0 50% 50%}.smart-tank[orientation=horizontal][thumb-label-position=far]:focus .smart-thumb{left:100%}.smart-tank[orientation=horizontal][scale-position=none] .smart-track{height:100%;width:100%;position:relative;border:var(--smart-border) solid;border-width:var(--smart-border-width);background-color:transparent;margin-top:0;margin-bottom:0}.smart-tank[orientation=horizontal][scale-position=both] .smart-track{height:calc(100% - 2 * var(--smart-tank-scale-size) - 4px)}.smart-tank[orientation=horizontal][scale-position=both] .smart-scale{width:100%;height:var(--smart-tank-scale-size)}@keyframes sideWays{0%{margin-left:-10%}100%{margin-left:55%}}@keyframes animateBubble{0%{margin-top:100%}100%{margin-top:-100%}}smart-tank[right-to-left] .smart-label,smart-tank[right-to-left] .smart-tooltip-content{direction:rtl}smart-tank[right-to-left][show-thumb-label][orientation=horizontal] .smart-thumb{left:calc(-1 * var(--smart-tank-thumb-width)/ 2);margin-left:initial}smart-tank[right-to-left][show-thumb-label][orientation=horizontal][inverted] .smart-thumb{left:100%;margin-left:calc(-1 * var(--smart-tank-thumb-width)/ 2)}smart-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=far] .smart-thumb{left:calc(-1 * var(--smart-tank-thumb-width)/ 2)}smart-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=far][inverted] .smart-thumb{top:calc(100% - var(--smart-tank-thumb-width)/ 2)}smart-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=far][inverted]:focus .smart-thumb{top:calc(100% + var(--smart-tank-thumb-height)/ 2)}smart-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=near][inverted] .smart-thumb{top:calc(-1 * var(--smart-tank-thumb-width)/ 2)}smart-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=near][inverted]:focus .smart-thumb{top:calc(-1 * var(--smart-tank-thumb-height) - var(--smart-tank-thumb-height)/ 2 - 2px)}
smart-slider{display:block;width:var(--smart-slider-default-width);height:var(--smart-slider-default-height);--smart-border-top-left-radius:100%;--smart-border-top-right-radius:100%;--smart-border-bottom-left-radius:100%;--smart-border-bottom-right-radius:100%}smart-slider[orientation=vertical]{width:var(--smart-slider-default-height);height:var(--smart-slider-default-width)}smart-slider.smart-element{overflow:visible}.smart-slider .smart-track-container{width:100%;height:var(--smart-slider-track-size);margin-top:calc((var(--smart-slider-thumb-height) - var(--smart-slider-track-size))/ 2 + 2px);margin-bottom:calc((var(--smart-slider-thumb-height) - var(--smart-slider-track-size))/ 2 + 2px)}.smart-slider .smart-track{user-select:none;-webkit-user-select:none;position:relative;float:left;width:100%;height:var(--smart-slider-track-size);background-color:var(--smart-disabled);cursor:pointer}.smart-slider .smart-thumb{position:absolute;margin-left:calc(-1 * var(--smart-slider-thumb-width)/ 2);margin-top:calc(var(--smart-slider-track-size)/ 2 - var(--smart-slider-thumb-height)/ 2);border-top-left-radius:var(--smart-slider-thumb-border-top-left-radius);border-top-right-radius:var(--smart-slider-thumb-border-top-right-radius);border-bottom-left-radius:var(--smart-slider-thumb-border-bottom-left-radius);border-bottom-right-radius:var(--smart-slider-thumb-border-bottom-right-radius);border:var(--smart-border-width) solid var(--smart-primary);width:var(--smart-slider-thumb-width);min-width:var(--smart-slider-track-size);height:var(--smart-slider-thumb-height);min-height:var(--smart-slider-track-size);background-color:var(--smart-primary);cursor:pointer;user-select:none;-webkit-user-select:none}.smart-slider .smart-thumb:before{width:100%;height:100%;transition:.2s;display:block;border-radius:50%;content:"";z-index:-1;opacity:.2;background:var(--smart-primary)}.smart-slider .smart-thumb[hover]:before{transform:scale(3);animation:slider-thumb-effect 1s infinite;animation-delay:.1s}.smart-slider .smart-thumb.accessible{z-index:1}.smart-slider .smart-thumb-label,.smart-slider .smart-thumb~.smart-thumb{display:none}.smart-slider .smart-value{position:absolute;width:0;height:var(--smart-slider-track-size);background-color:var(--smart-ui-state-active)}.smart-slider .smart-tooltip{position:absolute;display:flex;align-items:center;justify-content:center;border:1px solid var(--smart-primary);width:var(--smart-slider-tooltip-width);height:var(--smart-slider-tooltip-height);padding:4px 12px;font-family:var(--smart-font-family);font-size:75%;opacity:.5;border-radius:0;background-color:var(--smart-primary);color:var(--smart-primary-color);left:calc(-1 * var(--smart-slider-tooltip-width)/ 2 + var(--smart-slider-thumb-width)/ 2 - 1px);top:calc(-1 * var(--smart-slider-tooltip-height) - 22px)}.smart-slider .smart-scale.smart-hidden,.smart-slider .smart-tooltip.smart-hidden{display:none}.smart-slider .smart-tooltip .smart-tooltip-content{background:inherit;color:inherit;border-color:inherit;background-color:inherit}.smart-slider .smart-tick{position:absolute;width:1px;height:var(--smart-slider-tick-size);background-color:var(--smart-border)}.smart-slider .smart-tick-minor{height:var(--smart-slider-minor-tick-size)}.smart-slider .smart-scale{margin-left:var(--smart-border-width);height:calc(100% - var(--smart-slider-thumb-height) - 4px)}.smart-slider .smart-scale-near .smart-tick{bottom:0}.smart-slider .smart-scale-near .smart-label{bottom:calc(var(--smart-slider-tick-size) + 2px)}.smart-slider .smart-scale-far .smart-tick{top:0}.smart-slider .smart-scale-far .smart-label{top:calc(var(--smart-slider-tick-size) + 2px)}.smart-slider .smart-spin-button{display:block;float:left;margin-top:calc(var(--smart-slider-track-size)/ 2 - var(--smart-slider-spin-button-height)/ 2);border:var(--smart-border-width) solid var(--smart-border);border-top-left-radius:var(--smart-border-top-left-radius);border-top-right-radius:var(--smart-border-top-right-radius);border-bottom-left-radius:var(--smart-border-bottom-left-radius);border-bottom-right-radius:var(--smart-border-bottom-right-radius);width:var(--smart-slider-spin-button-width);height:var(--smart-slider-spin-button-height);background-color:var(--smart-surface);color:var(--smart-surface-color);cursor:pointer;padding:0;min-height:0;top:0;position:relative}.smart-slider .smart-spin-button.smart-hidden,.smart-slider:not([hint]) .smart-hint{display:none}.smart-slider .smart-spin-button .smart-button{padding:0;min-height:0}.smart-slider .smart-spin-button .smart-arrow{left:1px;top:1px}.smart-slider .smart-spin-button[hover]{background-color:var(--smart-ui-state-hover);color:var(--smart-ui-state-color-hover);border-color:var(--smart-ui-state-border-hover)}.smart-slider .smart-spin-button[active]{background-color:var(--smart-ui-state-active);color:var(--smart-ui-state-color-active);border-color:var(--smart-ui-state-border-active)}.smart-slider:focus{border-color:var(--smart-outline)}.smart-slider:focus .smart-thumb:before{transform:scale(3);animation:slider-thumb-effect 1s infinite;animation-delay:.1s}.smart-slider:not([animation=none]) .smart-thumb.enable-animation{transition:margin-left .4s cubic-bezier(.25,.8,.25,1)}.smart-slider:not([animation=none]) .smart-value.enable-animation{transition:width .4s cubic-bezier(.25,.8,.25,1)}.smart-slider:not([animation=none])[inverted] .smart-value.enable-animation,.smart-slider:not([animation=none])[range-slider] .smart-value.enable-animation{transition:width .4s cubic-bezier(.25,.8,.25,1),margin-left .4s cubic-bezier(.25,.8,.25,1)}.smart-slider:not([animation=none])[orientation=vertical] .smart-thumb.enable-animation{transition:margin-top .4s cubic-bezier(.25,.8,.25,1)}.smart-slider:not([animation=none])[orientation=vertical] .smart-value.enable-animation{transition:height .4s cubic-bezier(.25,.8,.25,1),margin-top .4s cubic-bezier(.25,.8,.25,1)}.smart-slider:not([animation=none])[orientation=vertical][inverted] .smart-value.enable-animation{transition:height .4s cubic-bezier(.25,.8,.25,1)}.smart-slider:not([animation=none])[orientation=vertical][range-slider] .smart-value.enable-animation{transition:height .4s cubic-bezier(.25,.8,.25,1),margin-top .4s cubic-bezier(.25,.8,.25,1)}.smart-slider[disabled] .smart-spin-button,.smart-slider[disabled] .smart-thumb,.smart-slider[disabled] .smart-track,.smart-slider[disabled] .smart-value,.smart-slider[readonly] .smart-spin-button,.smart-slider[readonly] .smart-thumb,.smart-slider[readonly] .smart-track,.smart-slider[readonly] .smart-value{cursor:default}.smart-slider[hint] .smart-hint{position:absolute;left:0;bottom:calc(100% + 2px);font-size:12px;width:100%;display:block;pointer-events:none;user-select:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none}.smart-slider[hint] .smart-hint:empty{display:none}.smart-slider[range-slider] .smart-thumb~.smart-thumb,.smart-slider[show-thumb-label]:focus .smart-thumb-label{display:block}.smart-slider[hint][scale-position=both]:not([orientation=vertical]) .smart-hint{bottom:150%}.smart-slider[ticks-position=track] .smart-scale-near .smart-label,.smart-slider[ticks-visibility=none] .smart-scale-near .smart-label{bottom:2px}.smart-slider[hint]:not([animation=none]) .smart-hint{transition:opacity .2s cubic-bezier(.4,0,.6,1)}.smart-slider[value="0"] .smart-thumb{background-color:var(--smart-border);border-color:var(--smart-border)}.smart-slider[value="0"] .smart-thumb:before{background:var(--smart-border)}.smart-slider[show-buttons] .smart-track-container{margin-top:calc((var(--smart-slider-spin-button-height) - var(--smart-slider-track-size))/ 2 + 2px);margin-bottom:calc((var(--smart-slider-spin-button-height) - var(--smart-slider-track-size))/ 2 + 2px)}.smart-slider[show-buttons] .smart-track{margin-left:calc(var(--smart-slider-thumb-width)/ 2);margin-right:calc(var(--smart-slider-thumb-width)/ 2);width:calc(100% - 2 * var(--smart-slider-spin-button-width) - var(--smart-slider-thumb-width))}.smart-slider[show-buttons] .smart-scale{height:calc(100% - var(--smart-slider-spin-button-height) - 4px);margin-left:calc(var(--smart-slider-spin-button-width) + var(--smart-slider-thumb-width)/ 2 + var(--smart-border-width));margin-right:calc(var(--smart-slider-spin-button-width) + var(--smart-slider-thumb-width)/ 2)}.smart-slider[tooltip-position=far] .smart-tooltip{top:calc(var(--smart-slider-thumb-height) + 1px)}.smart-slider[scale-position=both] .smart-scale{height:calc((100% - var(--smart-slider-thumb-height))/ 2 - 2px)}.smart-slider[scale-position=both][show-buttons] .smart-scale{height:calc((100% - var(--smart-slider-spin-button-height))/ 2 - 2px)}.smart-slider[ticks-visibility=none] .smart-scale-far .smart-label{top:2px}.smart-slider[ticks-position=track] .smart-tick{height:100%}.smart-slider[ticks-position=track] .smart-tick-minor{height:60%;top:50%;transform:translateY(-50%)}.smart-slider[ticks-position=track] .smart-scale-far .smart-label{top:2px}.smart-slider[show-thumb-label] .smart-thumb{overflow:hidden;text-overflow:ellipsis;z-index:9999}.smart-slider[show-thumb-label] .smart-thumb-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:7px;font-family:var(--smart-font-family);user-select:none}.smart-slider[thumb-label-position=far] .smart-thumb{top:0}.smart-slider[thumb-label-position=far]:focus .smart-thumb{top:calc(var(--smart-slider-default-height) + var(--smart-slider-thumb-width) * 2)}.smart-slider[orientation=vertical].smart-container,.smart-slider[orientation=vertical]>.smart-container{display:flex;flex-flow:row;justify-content:space-between}.smart-slider[orientation=vertical] .smart-thumb{margin-left:calc(var(--smart-slider-track-size)/ 2 - var(--smart-slider-thumb-width)/ 2);margin-top:calc(-1 * var(--smart-slider-thumb-height)/ 2)}.smart-slider[orientation=vertical] .smart-track-container{float:left;width:var(--smart-slider-track-size);height:100%;margin-top:0;margin-right:calc((var(--smart-slider-thumb-width) - var(--smart-slider-track-size))/ 2 + 2px);margin-bottom:0;margin-left:calc((var(--smart-slider-thumb-width) - var(--smart-slider-track-size))/ 2 + 2px);z-index:1}.smart-slider[orientation=vertical] .smart-track{float:none;width:var(--smart-slider-track-size);height:100%}.smart-slider[orientation=vertical] .smart-value{width:var(--smart-slider-track-size);height:0}.smart-slider[orientation=vertical] .smart-scale{float:left;margin-top:var(--smart-border-width);width:calc(100% - var(--smart-slider-thumb-width) - 2px);height:100%}.smart-slider[orientation=vertical] .smart-tooltip{left:calc(-1 * var(--smart-slider-tooltip-width) - 8px);top:calc(-1 * var(--smart-slider-tooltip-height)/ 2 + var(--smart-slider-thumb-height)/ 2 - 1px)}.smart-slider[orientation=vertical] .smart-tick{width:var(--smart-slider-tick-size);height:1px}.smart-slider[orientation=vertical] .smart-tick-minor{width:var(--smart-slider-minor-tick-size)}.smart-slider[orientation=vertical] .smart-scale-near .smart-tick{right:0}.smart-slider[orientation=vertical] .smart-scale-near .smart-label{right:calc(var(--smart-slider-tick-size) + 2px);bottom:initial}.smart-slider[orientation=vertical][ticks-position=track] .smart-scale-near .smart-label,.smart-slider[orientation=vertical][ticks-visibility=none] .smart-scale-near .smart-label{right:2px}.smart-slider[orientation=vertical] .smart-scale-far .smart-label{left:calc(var(--smart-slider-tick-size) + 2px)}.smart-slider[orientation=vertical] .smart-spin-button{float:none;margin-left:calc(var(--smart-slider-track-size)/ 2 - var(--smart-slider-spin-button-width)/ 2);margin-top:0}.smart-slider[orientation=vertical][inverted] .smart-thumb{margin-top:0}.smart-slider[orientation=vertical][scale-position=both] .smart-scale{width:calc((100% - var(--smart-slider-thumb-width))/ 2 - 2px)}.smart-slider[orientation=vertical][scale-position=both][show-buttons] .smart-scale{width:calc((100% - var(--smart-slider-spin-button-width))/ 2)}.smart-slider[orientation=vertical][show-buttons] .smart-track-container{margin-right:calc((var(--smart-slider-spin-button-width) - var(--smart-slider-track-size))/ 2 + 2px);margin-left:calc((var(--smart-slider-spin-button-width) - var(--smart-slider-track-size))/ 2 + 2px)}.smart-slider[orientation=vertical][show-buttons] .smart-track{margin-left:0;margin-right:0;margin-top:calc(var(--smart-slider-thumb-height)/ 2);margin-bottom:calc(var(--smart-slider-thumb-height)/ 2);width:100%;height:calc(100% - 2 * var(--smart-slider-spin-button-height) - var(--smart-slider-thumb-height))}.smart-slider[orientation=vertical][show-buttons] .smart-scale{margin-top:calc(var(--smart-slider-spin-button-height) + var(--smart-slider-thumb-height)/ 2 + var(--smart-border-width));margin-right:0;margin-left:0;height:calc(100% - var(--smart-slider-spin-button-height) * 2 - var(--smart-slider-thumb-height))}.smart-slider[orientation=vertical][tooltip-position=far] .smart-tooltip{left:calc(var(--smart-slider-thumb-width) + 1px)}.smart-slider[orientation=vertical][ticks-position=track] .smart-tick{width:100%;height:1px}.smart-slider[orientation=vertical][ticks-position=track] .smart-tick-minor{width:60%;left:50%;transform:translateX(-50%)}.smart-slider[orientation=vertical][ticks-position=track] .smart-scale-far .smart-label,.smart-slider[orientation=vertical][ticks-visibility=none] .smart-scale-far .smart-label{left:2px}.smart-slider[orientation=vertical][thumb-label-position=far] .smart-thumb{left:100%;top:calc(100% + var(--smart-slider-thumb-height)/ 2)}@keyframes slider-thumb-effect{0%,100%{transform:scale(3)}50%{transform:scale(2.75)}}.smart-slider[right-to-left] .smart-hint,.smart-slider[right-to-left] .smart-label,smart-slider[right-to-left] .smart-tooltip-content{direction:rtl}.smart-slider[right-to-left]:not([animation=none]) .smart-value.enable-animation{transition:width .4s cubic-bezier(.25,.8,.25,1),margin-left .4s cubic-bezier(.25,.8,.25,1)}