/* smart-progress-bar */
smart-progress-bar,
smart-circular-progress-bar {

    //Right To Left
    &[right-to-left] {
        .smart-label {
            direction: rtl;
        }
    }
}

smart-progress-bar {

    //Right To Left
    &[right-to-left] {

        &:not([orientation="vertical"]),
        &[orientation="horizontal"] {
            .smart-value {
                transform-origin: right;
            }

            &[inverted] {
                .smart-value {
                    transform-origin: left;
                }
            }
        }

        &[orientation="horizontal"] .smart-value.smart-value-animation,
        &:not([orientation="vertical"]) .smart-value.smart-value-animation {
            animation: indeterminate-inverted 3s infinite linear;
        }

        &[inverted][orientation="horizontal"] .smart-value.smart-value-animation,
        &[inverted]:not([orientation="vertical"]) .smart-value.smart-value-animation {
            animation: indeterminate 3s infinite linear;
        }
    }
}

smart-circular-progress-bar {

    //Right To Left
    &[right-to-left] {
        &[inverted] {
            svg {
                &:first-of-type {
                    .smart-value.smart-value-animation {
                        animation: circle 2s infinite linear;
                    }
                }
            }
        }

        svg {
            &:first-of-type {
                .smart-value.smart-value-animation {
                    animation: circle-inverted 2s infinite linear;
                }
            }
        }

        &[indeterminate] svg:first-of-type,
        &[value="null"] svg:first-of-type {
            animation: rotate-circle-inverted 1s infinite linear;
        }

        &[indeterminate][inverted] svg:first-of-type,
        &[value="null"][inverted] svg:first-of-type {
            animation: rotate-circle 1s infinite linear;
        }
    }
}

/* Barber Shop */
.barber-shop-effect {

    //Right To Left
    &[right-to-left] {
        .smart-value {
            animation-direction: reverse;
        }

        &[inverted] {
            .smart-value {
                animation-direction: normal;
            }
        }
    }
}