.Sui-ProgressBar{
    --sui-progress-color: theme('colors.primary.500');
    --sui-progress-color-alt: theme('colors.primary.500 / 50%');
    --sui-progress-radius: theme('sui.radius.control');
    @apply flex flex-nowrap items-center;

    &__bar{
        @apply relative h-2 w-full flex-1 overflow-hidden rounded-[var(--sui-progress-radius)] z-10;
        &:before{
            content: ' ';
            @apply absolute inset-0 bg-[color:var(--sui-progress-color)] opacity-20 z-0;
        }
    }
    &__progress{
        @apply absolute left-0 top-0 bottom-0 right-0 overflow-hidden bg-transparent rounded-[var(--sui-progress-radius)] z-10;

        /*background: linear-gradient(
                -60deg,
                rgba(255, 255, 255, 0.3) 25%,
                rgba(255, 255, 255, 0) 25%,
                rgba(255, 255, 255, 0) 50%,
                rgba(255, 255, 255, 0.3) 50%,
                rgba(255, 255, 255, 0.3) 75%,
                rgba(255, 255, 255, 0) 75%,
                rgba(255, 255, 255, 0)
        );
        background-size: 40px 40px;
        animation: Sui-ProgressBarBgAnimation 1s linear infinite reverse;
        will-change: background-position;*/
        &:before, &:after {
            content: " ";
            will-change: left, right;
            @apply absolute left-0 top-0 bottom-0 right-0 bg-[color:var(--sui-progress-color)] rounded-[var(--sui-progress-radius)];
        }
        &:before{
            animation: Sui-ProgressBarAnimation 3s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
        }
        &:after{
            @apply bg-[color:var(--sui-progress-color-alt)];
            animation: Sui-ProgressBarAnimationShort 3s ease-out infinite;
        }
    }
    &__tag{
        left: -9999px;
        @apply hidden  invisible opacity-0 absolute z-0 ;
    }
    &__label{
        @apply shrink-0 grow-0 flex justify-center items-center text-center text-sui-text text-xs ml-1.5;
    }

    &--color-primary{
        --sui-progress-color: theme('colors.primary.500');
        --sui-progress-color-alt: theme('colors.primary.500 / 50%');
    }
    &--color-secondary{
        --sui-progress-color: theme('colors.secondary.500');
        --sui-progress-color-alt: theme('colors.secondary.500 / 50%');
    }
    &--color-info{
        --sui-progress-color: theme('colors.info.500');
        --sui-progress-color-alt: theme('colors.info.500 / 50%');
    }
    &--color-warning{
        --sui-progress-color: theme('colors.warning.500');
        --sui-progress-color-alt: theme('colors.warning.500 / 50%');
    }
    &--color-error{
        --sui-progress-color: theme('colors.error.500');
        --sui-progress-color-alt: theme('colors.error.500 / 50%');
    }
    &--color-success{
        --sui-progress-color: theme('colors.success.500');
        --sui-progress-color-alt: theme('colors.success.500 / 50%');
    }
    &--color-basic{
        --sui-progress-color: theme('colors.basic.400');
        --sui-progress-color-alt: theme('colors.basic.400 / 50%');
    }
    &--color-dark{
        --sui-progress-color: theme('colors.basic.800');
        --sui-progress-color-alt: theme('colors.basic.800 / 50%');
    }
    &--color-light{
        --sui-progress-color: theme('colors.light.500');
        --sui-progress-color-alt: theme('colors.light.500 / 50%');
    }

    &--determinate{
        .Sui-ProgressBar__progress{
            animation: none;
            background: var(--sui-progress-color);
            @apply right-auto duration-300 ease-in-out;
            transition-property: width;
            &:before, &:after {
                @apply hidden;
            }
        }
    }
    &--square{
        --sui-progress-radius: 0;
    }
    &--fixedMode{
        @apply fixed top-0 left-0 right-0 z-modal;
        .Sui-ProgressBar__bar{
            @apply rounded-none;
        }
    }
    &--hidden{
        @apply hidden;
    }
}

/*@keyframes Sui-ProgressBarAnimation {
    0%{left:-200%;right:100%;}
    80%{left:107%;right:-50%;}
    100%{left:100%;right:-200%;}
}*/
@keyframes Sui-ProgressBarAnimation{
    0% {
        left: -200%;
        right: 100%;
    }
    60% {
        left: 107%;
        right: -8%;
    }
    100% {
        left: 107%;
        right: -8%;
    }
}
@keyframes Sui-ProgressBarAnimationShort{
    0% {
        left: -200%;
        right: 100%;
    }
    60% {
        left: 107%;
        right: -8%;
    }
    100% {
        left: 107%;
        right: -8%;
    }
}
/*@keyframes Sui-ProgressBarBgAnimation{
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: 40px;
    }
}*/