smart-webcomponents-react 15.2.10 → 15.2.11

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

@@ -1,474 +1,502 @@
-/* smart-progress-bar */
-smart-progress-bar.smart-element,
-smart-circular-progress-bar.smart-element {
-  border: none;
-}
-smart-progress-bar.smart-element:focus > .smart-container,
-smart-circular-progress-bar.smart-element:focus > .smart-container {
-  border-color: var(--smart-outline);
-}
-smart-progress-bar > .smart-container, smart-progress-bar.smart-container,
-smart-circular-progress-bar > .smart-container,
-smart-circular-progress-bar.smart-container {
-  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);
-  overflow: hidden;
-  position: relative;
-  border-width: var(--smart-border-width);
-  border-style: solid;
-  border-color: var(--smart-border);
-  color: var(--smart-background-color);
-}
-smart-progress-bar .smart-label,
-smart-circular-progress-bar .smart-label {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  position: absolute;
-  text-align: center;
-  color: var(--smart-background-color);
-}
-
-smart-progress-bar {
-  width: var(--smart-progress-bar-default-width);
-  height: var(--smart-progress-bar-default-height);
-}
-smart-progress-bar .smart-label {
-  width: auto;
-  color: var(--smart-outline);
-}
-smart-progress-bar .smart-value {
-  outline: none;
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  position: absolute;
-  border: 1px solid var(--smart-ui-state-border-active);
-  background-color: var(--smart-ui-state-active);
-  transform-origin: left;
-}
-smart-progress-bar .smart-value.smart-value-animation {
-  animation: indeterminate 3s infinite linear;
-}
-smart-progress-bar.primary .smart-value {
-  border: 1px solid var(--smart-primary);
-  background-color: var(--smart-primary);
-}
-smart-progress-bar.secondary .smart-value {
-  border: 1px solid var(--smart-secondary);
-  background-color: var(--smart-secondary);
-}
-smart-progress-bar.success .smart-value {
-  border: 1px solid var(--smart-success);
-  background-color: var(--smart-success);
-}
-smart-progress-bar.info .smart-value {
-  border: 1px solid var(--smart-info);
-  background-color: var(--smart-info);
-}
-smart-progress-bar.warning .smart-value {
-  border: 1px solid var(--smart-warning);
-  background-color: var(--smart-warning);
-}
-smart-progress-bar.error .smart-value {
-  border: 1px solid var(--smart-error);
-  background-color: var(--smart-error);
-}
-smart-progress-bar.light .smart-value {
-  border: 1px solid var(--smart-light);
-  background-color: var(--smart-light);
-}
-smart-progress-bar.dark .smart-value {
-  border: 1px solid var(--smart-dark);
-  background-color: var(--smart-dark);
-}
-smart-progress-bar:not([animation='none']) .smart-value {
-  transition: 0.2s ease-in-out;
-}
-smart-progress-bar[orientation][inverted] .smart-value {
-  transform-origin: right;
-}
-smart-progress-bar[inverted] .smart-value {
-  transform-origin: right;
-}
-smart-progress-bar[inverted] .smart-value.smart-value-animation {
-  animation: indeterminate-inverted 3s infinite linear;
-}
-smart-progress-bar[orientation] .smart-value {
-  transform-origin: left;
-}
-smart-progress-bar[orientation="vertical"] {
-  width: var(--smart-progress-bar-default-height);
-  height: var(--smart-progress-bar-default-width);
-}
-smart-progress-bar[orientation="vertical"][inverted] .smart-value {
-  transform-origin: left bottom;
-}
-smart-progress-bar[orientation="vertical"] .smart-value {
-  transform-origin: left top;
-}
-smart-progress-bar[orientation="vertical"] .smart-value.smart-value-animation {
-  animation: indeterminate-vertical 3s infinite linear;
-}
-smart-progress-bar[orientation="vertical"] .smart-label {
-  width: 100%;
-}
-smart-progress-bar[inverted][orientation="vertical"] .smart-value.smart-value-animation {
-  animation: indeterminate-vertical-inverted 3s infinite linear;
-}
-
-smart-circular-progress-bar {
-  width: var(--smart-circular-progress-bar-default-size);
-  height: var(--smart-circular-progress-bar-default-size);
-}
-smart-circular-progress-bar > .smart-container, smart-circular-progress-bar.smart-container {
-  border-radius: 50%;
-}
-smart-circular-progress-bar .smart-value-animation-ms {
-  stroke-dashoffset: 114;
-}
-smart-circular-progress-bar svg:first-of-type {
-  position: absolute;
-  border-radius: 50%;
-  pointer-events: none;
-}
-smart-circular-progress-bar svg:first-of-type .smart-value.smart-value-animation {
-  animation: circle 2s infinite linear;
-}
-smart-circular-progress-bar .smart-label-container {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  overflow: hidden;
-  box-sizing: content-box;
-  border-radius: 50%;
-  background-color: transparent;
-  border-style: solid;
-  border-width: var(--smart-border-width);
-  border-color: var(--smart-border);
-  width: calc(100% - var(--smart-circular-progress-bar-fill-size));
-  height: calc(100% - var(--smart-circular-progress-bar-fill-size));
-}
-smart-circular-progress-bar .smart-value,
-smart-circular-progress-bar .smart-value-path {
-  stroke-width: var(--smart-circular-progress-bar-fill-size);
-  fill: transparent;
-  stroke-dasharray: 314.159;
-}
-smart-circular-progress-bar .smart-value {
-  stroke: var(--smart-ui-state-active);
-}
-smart-circular-progress-bar .smart-value-path {
-  stroke-dashoffset: 0;
-  stroke: transparent;
-}
-smart-circular-progress-bar.primary .smart-value {
-  stroke: var(--smart-primary);
-}
-smart-circular-progress-bar.secondary .smart-value {
-  stroke: var(--smart-secondary);
-}
-smart-circular-progress-bar.success .smart-value {
-  stroke: var(--smart-success);
-}
-smart-circular-progress-bar.info .smart-value {
-  stroke: var(--smart-info);
-}
-smart-circular-progress-bar.warning .smart-value {
-  stroke: var(--smart-warning);
-}
-smart-circular-progress-bar.error .smart-value {
-  stroke: var(--smart-error);
-}
-smart-circular-progress-bar.light .smart-value {
-  stroke: var(--smart-light);
-}
-smart-circular-progress-bar.dark .smart-value {
-  stroke: var(--smart-dark);
-}
-smart-circular-progress-bar:not([animation='none']) .smart-value {
-  transition: stroke-dashoffset 1s linear;
-}
-smart-circular-progress-bar[inverted] svg:first-of-type .smart-value.smart-value-animation {
-  animation: circle-inverted 2s infinite linear;
-}
-smart-circular-progress-bar[indeterminate][inverted] svg:first-of-type, smart-circular-progress-bar[value="null"][inverted] svg:first-of-type {
-  animation: rotate-circle-inverted 1s infinite linear;
-}
-smart-circular-progress-bar[indeterminate] svg:first-of-type, smart-circular-progress-bar[value="null"] svg:first-of-type {
-  animation: rotate-circle 1s infinite linear;
-}
-
-/* Barber Shop */
-.barber-shop-effect .smart-value {
-  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2) 75%, transparent 75%, transparent);
-  background-size: 5rem 5rem;
-  background-position: 0 -244rem;
-  animation: stripes 10s linear infinite;
-  animation-direction: normal;
-}
-.barber-shop-effect[inverted] .smart-value, .barber-shop-effect[orientation="vertical"] .smart-value {
-  animation-direction: reverse;
-}
-
-/* ANIMATION - BarberShop style */
-@keyframes stripes {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 60rem 0;
-  }
-}
-@keyframes indeterminate {
-  0% {
-    left: -100%;
-    transform: scaleX(0.4);
-    transform-origin: left;
-  }
-  20% {
-    left: -40%;
-    transform: scaleX(0.3);
-    transform-origin: left;
-  }
-  35% {
-    left: 35%;
-    transform: scaleX(0.4);
-    transform-origin: left;
-  }
-  50% {
-    left: 75%;
-    transform: scaleX(0.6);
-    transform-origin: left;
-  }
-  55% {
-    left: 100%;
-    transform: scaleX(0.7);
-    transform-origin: left;
-  }
-  55.99% {
-    left: 100%;
-    transform: scaleX(0);
-    transform-origin: left;
-  }
-  56% {
-    left: -100%;
-    transform: scaleX(0);
-    transform-origin: left;
-  }
-  56.99% {
-    left: -100%;
-    transform: scaleX(0.6);
-    transform-origin: left;
-  }
-  75% {
-    left: -5%;
-    transform: scaleX(0.6);
-    transform-origin: left;
-  }
-  80% {
-    left: 30%;
-    transform: scaleX(0.5);
-    transform-origin: left;
-  }
-  85% {
-    left: 50%;
-    transform: scaleX(0.4);
-    transform-origin: left;
-  }
-  90% {
-    left: 75%;
-    transform: scaleX(0.3);
-    transform-origin: left;
-  }
-  95% {
-    left: 95%;
-    transform: scaleX(0.2);
-    transform-origin: left;
-  }
-  98% {
-    left: 100%;
-    transform: scaleX(0.2);
-    transform-origin: left;
-  }
-  99.99% {
-    left: 100%;
-    transform: scaleX(0);
-    transform-origin: left;
-  }
-  100% {
-    left: -100%;
-    transform: scaleX(0);
-    transform-origin: left;
-  }
-}
-@keyframes indeterminate-vertical {
-  0% {
-    bottom: -100%;
-    transform: scaleY(0.4);
-    transform-origin: bottom;
-  }
-  20% {
-    bottom: -40%;
-    transform: scaleY(0.3);
-    transform-origin: bottom;
-  }
-  35% {
-    bottom: 35%;
-    transform: scaleY(0.4);
-    transform-origin: bottom;
-  }
-  50% {
-    bottom: 75%;
-    transform: scaleY(0.6);
-    transform-origin: bottom;
-  }
-  55% {
-    bottom: 100%;
-    transform: scaleY(0.7);
-    transform-origin: bottom;
-  }
-  55.99% {
-    bottom: 100%;
-    transform: scaleY(0);
-    transform-origin: bottom;
-  }
-  56% {
-    bottom: -100%;
-    transform: scaleY(0);
-    transform-origin: bottom;
-  }
-  56.99% {
-    bottom: -100%;
-    transform: scaleY(0.6);
-    transform-origin: bottom;
-  }
-  75% {
-    bottom: -5%;
-    transform: scaleY(0.6);
-    transform-origin: bottom;
-  }
-  80% {
-    bottom: 30%;
-    transform: scaleY(0.5);
-    transform-origin: bottom;
-  }
-  85% {
-    bottom: 50%;
-    transform: scaleY(0.4);
-    transform-origin: bottom;
-  }
-  90% {
-    bottom: 75%;
-    transform: scaleY(0.3);
-    transform-origin: bottom;
-  }
-  95% {
-    bottom: 95%;
-    transform: scaleY(0.2);
-    transform-origin: bottom;
-  }
-  98% {
-    bottom: 100%;
-    transform: scaleY(0.2);
-    transform-origin: bottom;
-  }
-  99.99% {
-    bottom: 100%;
-    transform: scaleY(0);
-    transform-origin: bottom;
-  }
-  100% {
-    bottom: -100%;
-    transform: scaleY(0);
-    transform-origin: bottom;
-  }
-}
-@keyframes circle {
-  0% {
-    stroke-dashoffset: 314;
-  }
-  5% {
-    stroke-dashoffset: 164;
-  }
-  25% {
-    stroke-dashoffset: 104;
-  }
-}
-@keyframes circle-inverted {
-  0% {
-    stroke-dashoffset: -314;
-  }
-  5% {
-    stroke-dashoffset: -164;
-  }
-  25% {
-    stroke-dashoffset: -104;
-  }
-}
-@keyframes rotate-circle {
-  50% {
-    transform: rotate(180deg);
-  }
-  75% {
-    transform: rotate(270deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes rotate-circle-inverted {
-  50% {
-    transform: rotate(-180deg);
-  }
-  75% {
-    transform: rotate(-270deg);
-  }
-  100% {
-    transform: rotate(-360deg);
-  }
-}
-/* smart-progress-bar */
-smart-progress-bar[right-to-left] .smart-label,
-smart-circular-progress-bar[right-to-left] .smart-label {
-  direction: rtl;
-}
-
-smart-progress-bar[right-to-left]:not([orientation="vertical"]) .smart-value, smart-progress-bar[right-to-left][orientation="horizontal"] .smart-value {
-  transform-origin: right;
-}
-smart-progress-bar[right-to-left]:not([orientation="vertical"])[inverted] .smart-value, smart-progress-bar[right-to-left][orientation="horizontal"][inverted] .smart-value {
-  transform-origin: left;
-}
-smart-progress-bar[right-to-left][orientation="horizontal"] .smart-value.smart-value-animation, smart-progress-bar[right-to-left]:not([orientation="vertical"]) .smart-value.smart-value-animation {
-  animation: indeterminate-inverted 3s infinite linear;
-}
-smart-progress-bar[right-to-left][inverted][orientation="horizontal"] .smart-value.smart-value-animation, smart-progress-bar[right-to-left][inverted]:not([orientation="vertical"]) .smart-value.smart-value-animation {
-  animation: indeterminate 3s infinite linear;
-}
-
-smart-circular-progress-bar[right-to-left][inverted] svg:first-of-type .smart-value.smart-value-animation {
-  animation: circle 2s infinite linear;
-}
-smart-circular-progress-bar[right-to-left] svg:first-of-type .smart-value.smart-value-animation {
-  animation: circle-inverted 2s infinite linear;
-}
-smart-circular-progress-bar[right-to-left][indeterminate] svg:first-of-type, smart-circular-progress-bar[right-to-left][value="null"] svg:first-of-type {
-  animation: rotate-circle-inverted 1s infinite linear;
-}
-smart-circular-progress-bar[right-to-left][indeterminate][inverted] svg:first-of-type, smart-circular-progress-bar[right-to-left][value="null"][inverted] svg:first-of-type {
-  animation: rotate-circle 1s infinite linear;
-}
-
-/* Barber Shop */
-.barber-shop-effect[right-to-left] .smart-value {
-  animation-direction: reverse;
-}
-.barber-shop-effect[right-to-left][inverted] .smart-value {
-  animation-direction: normal;
-}
-
-/*# sourceMappingURL=smart.progressbar.css.map */
+/* smart-progress-bar */
+smart-progress-bar.smart-element,
+smart-circular-progress-bar.smart-element,
+.smart-circular-progress-bar.smart-element {
+  border: none;
+}
+smart-progress-bar.smart-element:focus > .smart-container,
+smart-circular-progress-bar.smart-element:focus > .smart-container,
+.smart-circular-progress-bar.smart-element:focus > .smart-container {
+  border-color: var(--smart-outline);
+}
+smart-progress-bar > .smart-container, smart-progress-bar.smart-container,
+smart-circular-progress-bar > .smart-container,
+smart-circular-progress-bar.smart-container,
+.smart-circular-progress-bar > .smart-container,
+.smart-circular-progress-bar.smart-container {
+  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);
+  overflow: hidden;
+  position: relative;
+  border-width: var(--smart-border-width);
+  border-style: solid;
+  border-color: var(--smart-border);
+  color: var(--smart-background-color);
+}
+smart-progress-bar .smart-label,
+smart-circular-progress-bar .smart-label,
+.smart-circular-progress-bar .smart-label {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  text-align: center;
+  color: var(--smart-background-color);
+}
+
+smart-progress-bar {
+  width: var(--smart-progress-bar-default-width);
+  height: var(--smart-progress-bar-default-height);
+}
+smart-progress-bar .smart-label {
+  width: auto;
+  color: var(--smart-outline);
+}
+smart-progress-bar .smart-value {
+  outline: none;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  position: absolute;
+  border: 1px solid var(--smart-ui-state-border-active);
+  background-color: var(--smart-ui-state-active);
+  transform-origin: left;
+}
+smart-progress-bar .smart-value.smart-value-animation {
+  animation: indeterminate 3s infinite linear;
+}
+smart-progress-bar.primary .smart-value {
+  border: 1px solid var(--smart-primary);
+  background-color: var(--smart-primary);
+}
+smart-progress-bar.secondary .smart-value {
+  border: 1px solid var(--smart-secondary);
+  background-color: var(--smart-secondary);
+}
+smart-progress-bar.success .smart-value {
+  border: 1px solid var(--smart-success);
+  background-color: var(--smart-success);
+}
+smart-progress-bar.info .smart-value {
+  border: 1px solid var(--smart-info);
+  background-color: var(--smart-info);
+}
+smart-progress-bar.warning .smart-value {
+  border: 1px solid var(--smart-warning);
+  background-color: var(--smart-warning);
+}
+smart-progress-bar.error .smart-value {
+  border: 1px solid var(--smart-error);
+  background-color: var(--smart-error);
+}
+smart-progress-bar.light .smart-value {
+  border: 1px solid var(--smart-light);
+  background-color: var(--smart-light);
+}
+smart-progress-bar.dark .smart-value {
+  border: 1px solid var(--smart-dark);
+  background-color: var(--smart-dark);
+}
+smart-progress-bar:not([animation=none]) .smart-value {
+  transition: 0.2s ease-in-out;
+}
+smart-progress-bar[orientation][inverted] .smart-value {
+  transform-origin: right;
+}
+smart-progress-bar[inverted] .smart-value {
+  transform-origin: right;
+}
+smart-progress-bar[inverted] .smart-value.smart-value-animation {
+  animation: indeterminate-inverted 3s infinite linear;
+}
+smart-progress-bar[orientation] .smart-value {
+  transform-origin: left;
+}
+smart-progress-bar[orientation=vertical] {
+  width: var(--smart-progress-bar-default-height);
+  height: var(--smart-progress-bar-default-width);
+}
+smart-progress-bar[orientation=vertical][inverted] .smart-value {
+  transform-origin: left bottom;
+}
+smart-progress-bar[orientation=vertical] .smart-value {
+  transform-origin: left top;
+}
+smart-progress-bar[orientation=vertical] .smart-value.smart-value-animation {
+  animation: indeterminate-vertical 3s infinite linear;
+}
+smart-progress-bar[orientation=vertical] .smart-label {
+  width: 100%;
+}
+smart-progress-bar[inverted][orientation=vertical] .smart-value.smart-value-animation {
+  animation: indeterminate-vertical-inverted 3s infinite linear;
+}
+
+smart-circular-progress-bar,
+.smart-circular-progress-bar {
+  width: var(--smart-circular-progress-bar-default-size);
+  height: var(--smart-circular-progress-bar-default-size);
+}
+smart-circular-progress-bar > .smart-container, smart-circular-progress-bar.smart-container,
+.smart-circular-progress-bar > .smart-container,
+.smart-circular-progress-bar.smart-container {
+  border-radius: 50%;
+}
+smart-circular-progress-bar .smart-value-animation-ms,
+.smart-circular-progress-bar .smart-value-animation-ms {
+  stroke-dashoffset: 114;
+}
+smart-circular-progress-bar svg:first-of-type,
+.smart-circular-progress-bar svg:first-of-type {
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+}
+smart-circular-progress-bar svg:first-of-type .smart-value.smart-value-animation,
+.smart-circular-progress-bar svg:first-of-type .smart-value.smart-value-animation {
+  animation: circle 2s infinite linear;
+}
+smart-circular-progress-bar .smart-label-container,
+.smart-circular-progress-bar .smart-label-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  overflow: hidden;
+  box-sizing: content-box;
+  border-radius: 50%;
+  background-color: transparent;
+  border-style: solid;
+  border-width: var(--smart-border-width);
+  border-color: var(--smart-border);
+  width: calc(100% - var(--smart-circular-progress-bar-fill-size));
+  height: calc(100% - var(--smart-circular-progress-bar-fill-size));
+}
+smart-circular-progress-bar .smart-value,
+smart-circular-progress-bar .smart-value-path,
+.smart-circular-progress-bar .smart-value,
+.smart-circular-progress-bar .smart-value-path {
+  stroke-width: var(--smart-circular-progress-bar-fill-size);
+  fill: transparent;
+  stroke-dasharray: 314.159;
+}
+smart-circular-progress-bar .smart-value,
+.smart-circular-progress-bar .smart-value {
+  stroke: var(--smart-ui-state-active);
+}
+smart-circular-progress-bar .smart-value-path,
+.smart-circular-progress-bar .smart-value-path {
+  stroke-dashoffset: 0;
+  stroke: transparent;
+}
+smart-circular-progress-bar.primary .smart-value,
+.smart-circular-progress-bar.primary .smart-value {
+  stroke: var(--smart-primary);
+}
+smart-circular-progress-bar.secondary .smart-value,
+.smart-circular-progress-bar.secondary .smart-value {
+  stroke: var(--smart-secondary);
+}
+smart-circular-progress-bar.success .smart-value,
+.smart-circular-progress-bar.success .smart-value {
+  stroke: var(--smart-success);
+}
+smart-circular-progress-bar.info .smart-value,
+.smart-circular-progress-bar.info .smart-value {
+  stroke: var(--smart-info);
+}
+smart-circular-progress-bar.warning .smart-value,
+.smart-circular-progress-bar.warning .smart-value {
+  stroke: var(--smart-warning);
+}
+smart-circular-progress-bar.error .smart-value,
+.smart-circular-progress-bar.error .smart-value {
+  stroke: var(--smart-error);
+}
+smart-circular-progress-bar.light .smart-value,
+.smart-circular-progress-bar.light .smart-value {
+  stroke: var(--smart-light);
+}
+smart-circular-progress-bar.dark .smart-value,
+.smart-circular-progress-bar.dark .smart-value {
+  stroke: var(--smart-dark);
+}
+smart-circular-progress-bar:not([animation=none]) .smart-value,
+.smart-circular-progress-bar:not([animation=none]) .smart-value {
+  transition: stroke-dashoffset 1s linear;
+}
+smart-circular-progress-bar[inverted] svg:first-of-type .smart-value.smart-value-animation,
+.smart-circular-progress-bar[inverted] svg:first-of-type .smart-value.smart-value-animation {
+  animation: circle-inverted 2s infinite linear;
+}
+smart-circular-progress-bar[indeterminate][inverted] svg:first-of-type, smart-circular-progress-bar[value=null][inverted] svg:first-of-type,
+.smart-circular-progress-bar[indeterminate][inverted] svg:first-of-type,
+.smart-circular-progress-bar[value=null][inverted] svg:first-of-type {
+  animation: rotate-circle-inverted 1s infinite linear;
+}
+smart-circular-progress-bar[indeterminate] svg:first-of-type, smart-circular-progress-bar[value=null] svg:first-of-type,
+.smart-circular-progress-bar[indeterminate] svg:first-of-type,
+.smart-circular-progress-bar[value=null] svg:first-of-type {
+  animation: rotate-circle 1s infinite linear;
+}
+
+/* Barber Shop */
+.barber-shop-effect .smart-value {
+  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2) 75%, transparent 75%, transparent);
+  background-size: 5rem 5rem;
+  background-position: 0 -244rem;
+  animation: stripes 10s linear infinite;
+  animation-direction: normal;
+}
+.barber-shop-effect[inverted] .smart-value, .barber-shop-effect[orientation=vertical] .smart-value {
+  animation-direction: reverse;
+}
+
+/* ANIMATION - BarberShop style */
+@keyframes stripes {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 60rem 0;
+  }
+}
+@keyframes indeterminate {
+  0% {
+    left: -100%;
+    transform: scaleX(0.4);
+    transform-origin: left;
+  }
+  20% {
+    left: -40%;
+    transform: scaleX(0.3);
+    transform-origin: left;
+  }
+  35% {
+    left: 35%;
+    transform: scaleX(0.4);
+    transform-origin: left;
+  }
+  50% {
+    left: 75%;
+    transform: scaleX(0.6);
+    transform-origin: left;
+  }
+  55% {
+    left: 100%;
+    transform: scaleX(0.7);
+    transform-origin: left;
+  }
+  55.99% {
+    left: 100%;
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+  56% {
+    left: -100%;
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+  56.99% {
+    left: -100%;
+    transform: scaleX(0.6);
+    transform-origin: left;
+  }
+  75% {
+    left: -5%;
+    transform: scaleX(0.6);
+    transform-origin: left;
+  }
+  80% {
+    left: 30%;
+    transform: scaleX(0.5);
+    transform-origin: left;
+  }
+  85% {
+    left: 50%;
+    transform: scaleX(0.4);
+    transform-origin: left;
+  }
+  90% {
+    left: 75%;
+    transform: scaleX(0.3);
+    transform-origin: left;
+  }
+  95% {
+    left: 95%;
+    transform: scaleX(0.2);
+    transform-origin: left;
+  }
+  98% {
+    left: 100%;
+    transform: scaleX(0.2);
+    transform-origin: left;
+  }
+  99.99% {
+    left: 100%;
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+  100% {
+    left: -100%;
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+}
+@keyframes indeterminate-vertical {
+  0% {
+    bottom: -100%;
+    transform: scaleY(0.4);
+    transform-origin: bottom;
+  }
+  20% {
+    bottom: -40%;
+    transform: scaleY(0.3);
+    transform-origin: bottom;
+  }
+  35% {
+    bottom: 35%;
+    transform: scaleY(0.4);
+    transform-origin: bottom;
+  }
+  50% {
+    bottom: 75%;
+    transform: scaleY(0.6);
+    transform-origin: bottom;
+  }
+  55% {
+    bottom: 100%;
+    transform: scaleY(0.7);
+    transform-origin: bottom;
+  }
+  55.99% {
+    bottom: 100%;
+    transform: scaleY(0);
+    transform-origin: bottom;
+  }
+  56% {
+    bottom: -100%;
+    transform: scaleY(0);
+    transform-origin: bottom;
+  }
+  56.99% {
+    bottom: -100%;
+    transform: scaleY(0.6);
+    transform-origin: bottom;
+  }
+  75% {
+    bottom: -5%;
+    transform: scaleY(0.6);
+    transform-origin: bottom;
+  }
+  80% {
+    bottom: 30%;
+    transform: scaleY(0.5);
+    transform-origin: bottom;
+  }
+  85% {
+    bottom: 50%;
+    transform: scaleY(0.4);
+    transform-origin: bottom;
+  }
+  90% {
+    bottom: 75%;
+    transform: scaleY(0.3);
+    transform-origin: bottom;
+  }
+  95% {
+    bottom: 95%;
+    transform: scaleY(0.2);
+    transform-origin: bottom;
+  }
+  98% {
+    bottom: 100%;
+    transform: scaleY(0.2);
+    transform-origin: bottom;
+  }
+  99.99% {
+    bottom: 100%;
+    transform: scaleY(0);
+    transform-origin: bottom;
+  }
+  100% {
+    bottom: -100%;
+    transform: scaleY(0);
+    transform-origin: bottom;
+  }
+}
+@keyframes circle {
+  0% {
+    stroke-dashoffset: 314;
+  }
+  5% {
+    stroke-dashoffset: 164;
+  }
+  25% {
+    stroke-dashoffset: 104;
+  }
+}
+@keyframes circle-inverted {
+  0% {
+    stroke-dashoffset: -314;
+  }
+  5% {
+    stroke-dashoffset: -164;
+  }
+  25% {
+    stroke-dashoffset: -104;
+  }
+}
+@keyframes rotate-circle {
+  50% {
+    transform: rotate(180deg);
+  }
+  75% {
+    transform: rotate(270deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotate-circle-inverted {
+  50% {
+    transform: rotate(-180deg);
+  }
+  75% {
+    transform: rotate(-270deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+/* smart-progress-bar */
+smart-progress-bar[right-to-left] .smart-label,
+smart-circular-progress-bar[right-to-left] .smart-label {
+  direction: rtl;
+}
+
+smart-progress-bar[right-to-left]:not([orientation=vertical]) .smart-value, smart-progress-bar[right-to-left][orientation=horizontal] .smart-value {
+  transform-origin: right;
+}
+smart-progress-bar[right-to-left]:not([orientation=vertical])[inverted] .smart-value, smart-progress-bar[right-to-left][orientation=horizontal][inverted] .smart-value {
+  transform-origin: left;
+}
+smart-progress-bar[right-to-left][orientation=horizontal] .smart-value.smart-value-animation, smart-progress-bar[right-to-left]:not([orientation=vertical]) .smart-value.smart-value-animation {
+  animation: indeterminate-inverted 3s infinite linear;
+}
+smart-progress-bar[right-to-left][inverted][orientation=horizontal] .smart-value.smart-value-animation, smart-progress-bar[right-to-left][inverted]:not([orientation=vertical]) .smart-value.smart-value-animation {
+  animation: indeterminate 3s infinite linear;
+}
+
+smart-circular-progress-bar[right-to-left][inverted] svg:first-of-type .smart-value.smart-value-animation {
+  animation: circle 2s infinite linear;
+}
+smart-circular-progress-bar[right-to-left] svg:first-of-type .smart-value.smart-value-animation {
+  animation: circle-inverted 2s infinite linear;
+}
+smart-circular-progress-bar[right-to-left][indeterminate] svg:first-of-type, smart-circular-progress-bar[right-to-left][value=null] svg:first-of-type {
+  animation: rotate-circle-inverted 1s infinite linear;
+}
+smart-circular-progress-bar[right-to-left][indeterminate][inverted] svg:first-of-type, smart-circular-progress-bar[right-to-left][value=null][inverted] svg:first-of-type {
+  animation: rotate-circle 1s infinite linear;
+}
+
+/* Barber Shop */
+.barber-shop-effect[right-to-left] .smart-value {
+  animation-direction: reverse;
+}
+.barber-shop-effect[right-to-left][inverted] .smart-value {
+  animation-direction: normal;
+}