smart-webcomponents-react 19.0.0 → 19.0.5

package/source/styles/default/smart.tank.css

@@ -1,662 +1,662 @@
-/* .smart-tank */
-smart-tank {
-  padding-left: 5px;
-  padding-right: 5px;
-  width: var(--smart-tank-default-width);
-  height: var(--smart-tank-default-height);
-}
-smart-tank.smart-element {
-  overflow: visible;
-  border: none;
-  background: none;
-}
-smart-tank.smart-scale-far .smart-tick {
-  top: initial;
-}
-
-smart-slider * {
-  box-sizing: border-box;
-}
-smart-slider:focus {
-  outline: none;
-}
-smart-slider.smart-element {
-  overflow: visible;
-  border: none;
-  background: none;
-}
-smart-slider .smart-container {
-  overflow: visible;
-}
-smart-slider .smart-scale {
-  position: relative;
-  user-select: none;
-  pointer-events: none;
-}
-smart-slider .smart-label {
-  position: absolute;
-  float: left;
-  white-space: nowrap;
-  font-family: inherit;
-  font-size: inherit;
-  color: var(--smart-background-color);
-}
-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-minor,
-smart-slider[ticks-visibility=major] .smart-tick, smart-slider[ticks-visibility=none] .smart-tick-minor,
-smart-slider[ticks-visibility=none] .smart-tick {
-  display: none;
-}
-smart-slider[labels-visibility=endPoints] .smart-label-middle {
-  visibility: hidden;
-}
-smart-slider[labels-visibility=none] .smart-label {
-  visibility: hidden;
-}
-
-.smart-tank * {
-  box-sizing: border-box;
-}
-.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: solid var(--smart-border);
-  border-width: var(--smart-border-width);
-  background-color: var(--smart-background);
-  float: left;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-left: 2px;
-  margin-right: 2px;
-  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;
-}
-.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;
-  float: left;
-  white-space: nowrap;
-  font-family: inherit;
-  font-size: inherit;
-  color: var(--smart-background-color);
-}
-.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 0.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);
-  /* 4px is the margin left/right of the track */
-}
-.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: 0.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: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.smart-hidden {
-  display: none;
-}
-.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 {
-  outline: none;
-}
-.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 0.15s ease-out, margin-top 0.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, 0.2), inset 0px 10px 25px 5px rgb(255, 255, 255);
-  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(0.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(0.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(0.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(0.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(0.35);
-}
-.smart-tank:not([animation=none])[disabled] .bubble, .smart-tank:not([animation=none])[inverted] .bubble, .smart-tank:not([animation=none])[orientation=horizontal] .bubble {
-  display: none;
-}
-.smart-tank[readonly] .smart-track.track-hovered, .smart-tank[disabled] .smart-track.track-hovered {
-  cursor: default;
-}
-.smart-tank[readonly]:active .smart-track, .smart-tank[disabled]: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-tick-minor,
-.smart-tank[ticks-visibility=none] .smart-tick {
-  display: none;
-}
-.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-visibility=major] .smart-tick-minor,
-.smart-tank[ticks-visibility=major] .smart-tick {
-  display: none;
-}
-.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: 0.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);
-  /* 2px comes from the border */
-  transform: scale(1);
-}
-.smart-tank[show-thumb-label]:not([animation=none]) .smart-thumb {
-  transition: transform 0.2s ease-out, left 0.2s ease-in-out, top 0.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);
-  /* 2px comes from the border */
-}
-.smart-tank[scale-position=none] .smart-track {
-  height: 100%;
-  width: 100%;
-  position: relative;
-  border: solid var(--smart-border);
-  border-width: var(--smart-border-width);
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-left: 0;
-  margin-right: 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[labels-visibility=endPoints] .smart-label-middle {
-  visibility: hidden;
-}
-.smart-tank[labels-visibility=none] .smart-label {
-  visibility: hidden;
-}
-.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 0.15s ease-out, margin-top 0.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 50%;
-}
-.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 0.15s ease-out, margin-left 0.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);
-  /* 2px comes from the border */
-}
-.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% 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: solid var(--smart-border);
-  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-tank */
+smart-tank {
+  padding-left: 5px;
+  padding-right: 5px;
+  width: var(--smart-tank-default-width);
+  height: var(--smart-tank-default-height);
+}
+smart-tank.smart-element {
+  overflow: visible;
+  border: none;
+  background: none;
+}
+smart-tank.smart-scale-far .smart-tick {
+  top: initial;
+}
+
+smart-slider * {
+  box-sizing: border-box;
+}
+smart-slider:focus {
+  outline: none;
+}
+smart-slider.smart-element {
+  overflow: visible;
+  border: none;
+  background: none;
+}
+smart-slider .smart-container {
+  overflow: visible;
+}
+smart-slider .smart-scale {
+  position: relative;
+  user-select: none;
+  pointer-events: none;
+}
+smart-slider .smart-label {
+  position: absolute;
+  float: left;
+  white-space: nowrap;
+  font-family: inherit;
+  font-size: inherit;
+  color: var(--smart-background-color);
+}
+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-minor,
+smart-slider[ticks-visibility=major] .smart-tick, smart-slider[ticks-visibility=none] .smart-tick-minor,
+smart-slider[ticks-visibility=none] .smart-tick {
+  display: none;
+}
+smart-slider[labels-visibility=endPoints] .smart-label-middle {
+  visibility: hidden;
+}
+smart-slider[labels-visibility=none] .smart-label {
+  visibility: hidden;
+}
+
+.smart-tank * {
+  box-sizing: border-box;
+}
+.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: solid var(--smart-border);
+  border-width: var(--smart-border-width);
+  background-color: var(--smart-background);
+  float: left;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: 2px;
+  margin-right: 2px;
+  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;
+}
+.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;
+  float: left;
+  white-space: nowrap;
+  font-family: inherit;
+  font-size: inherit;
+  color: var(--smart-background-color);
+}
+.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 0.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);
+  /* 4px is the margin left/right of the track */
+}
+.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: 0.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: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.smart-hidden {
+  display: none;
+}
+.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 {
+  outline: none;
+}
+.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 0.15s ease-out, margin-top 0.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, 0.2), inset 0px 10px 25px 5px rgb(255, 255, 255);
+  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(0.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(0.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(0.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(0.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(0.35);
+}
+.smart-tank:not([animation=none])[disabled] .bubble, .smart-tank:not([animation=none])[inverted] .bubble, .smart-tank:not([animation=none])[orientation=horizontal] .bubble {
+  display: none;
+}
+.smart-tank[readonly] .smart-track.track-hovered, .smart-tank[disabled] .smart-track.track-hovered {
+  cursor: default;
+}
+.smart-tank[readonly]:active .smart-track, .smart-tank[disabled]: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-tick-minor,
+.smart-tank[ticks-visibility=none] .smart-tick {
+  display: none;
+}
+.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-visibility=major] .smart-tick-minor,
+.smart-tank[ticks-visibility=major] .smart-tick {
+  display: none;
+}
+.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: 0.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);
+  /* 2px comes from the border */
+  transform: scale(1);
+}
+.smart-tank[show-thumb-label]:not([animation=none]) .smart-thumb {
+  transition: transform 0.2s ease-out, left 0.2s ease-in-out, top 0.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);
+  /* 2px comes from the border */
+}
+.smart-tank[scale-position=none] .smart-track {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  border: solid var(--smart-border);
+  border-width: var(--smart-border-width);
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-right: 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[labels-visibility=endPoints] .smart-label-middle {
+  visibility: hidden;
+}
+.smart-tank[labels-visibility=none] .smart-label {
+  visibility: hidden;
+}
+.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 0.15s ease-out, margin-top 0.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 50%;
+}
+.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 0.15s ease-out, margin-left 0.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);
+  /* 2px comes from the border */
+}
+.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% 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: solid var(--smart-border);
+  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);
 }