//inspired by:
//https://material.io/guidelines/components/progress-activity.html#progress-activity-types-of-indicators
//https://codepen.io/holdencreative/pen/vEVbwv?editors=1100
.progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: $progress-bar-height;
    background: desaturate(rgba($primary, 0.4), 10%);
    transition: opacity 0.2s;
    background-clip: padding-box;
    overflow: hidden;
    will-change: opacity;
    z-index: 99; // kt-aside + kt-header have z-index of 97 & 98 respectively

    .inner {
        background-color: $primary;

        &:before {
            content: '';
            position: absolute;
            background-color: inherit;
            top: 0;
            left: 0;
            bottom: 0;
            will-change: left, right;
            animation: indeterminateProgressBar $progress-bar-duration cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
        }
        &:after {
            content: '';
            position: absolute;
            background-color: inherit;
            top: 0;
            left: 0;
            bottom: 0;
            will-change: left, right;
            animation: indeterminateProgressBarShort $progress-bar-duration cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
            animation-delay: $progress-bar-delay;
        }
    }

    &.app-progress-bar {
        position: fixed;
        z-index: $zindex-fixed + 1;
    }

    &.light {
        background: rgba(#fff, 0.3);

        .inner {
            background-color: rgba(#fff, 0.8);
        }
    }

    &.app-progress-bar {
        opacity: 0;

        &.is-shown,
        .is-loading & {
            opacity: 1;
        }
    }

    .card > & {
        top: -1px;
        left: -1px;
        right: -1px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        z-index: 2;
    }
}

.progress {
    position: relative;

    .progress-bar {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        height: auto;
        background-color: $secondary;
        overflow: visible;
        transition: width 0.6s ease;

        &.progress-bar-striped {
            background-image: linear-gradient(
                45deg,
                rgba(#fff, 0.15) 25%,
                transparent 25%,
                transparent 50%,
                rgba(#fff, 0.15) 50%,
                rgba(#fff, 0.15) 75%,
                transparent 75%,
                transparent
            );
            background-size: 1rem 1rem;
        }
    }

    .progress-bar-label {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 2;
        justify-content: center;
        align-items: center;
        color: #fff;
        text-shadow: 1px 1px 1px rgba(#000, 0.9);
    }
}

@keyframes indeterminateProgressBar {
    0% {
        left: -35%;
        right: 100%;
    }
    60% {
        left: 100%;
        right: -90%;
    }
    100% {
        left: 100%;
        right: -90%;
    }
}

@keyframes indeterminateProgressBarShort {
    0% {
        left: -200%;
        right: 100%;
    }
    60% {
        left: 107%;
        right: -8%;
    }
    100% {
        left: 107%;
        right: -8%;
    }
}