.multi-step-bar-container {
    position: relative;

    &.mod-small {
        .multi-step-bar {
            min-height: $multi-step-small-height;
        }

        .multi-step-bar-text {
            padding: $multi-step-bar-mod-small-text-padding;
        }
    }

    &.mod-multi-step-bar-in-progress-sliding-animation {
        .multi-step-bar-doing {
            z-index: 1;
            background-image: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 11px,
                $multi-step-animation-color 10px,
                $multi-step-animation-color 25px
            );
            background-repeat: repeat-x;
            background-size: $multi-step-sliding-animation-background-width
                $multi-step-sliding-animation-background-height;
            animation: slide-background 0.4s linear infinite;
        }
    }

    &.mod-multi-step-bar-in-progress-shine-animation {
        .multi-step-bar-doing {
            animation: shine-background 5s linear reverse infinite;
        }
    }

    &.mod-multi-step-bar-flare-animation {
        &::after {
            position: absolute;
            inset: 0;
            background-image: linear-gradient(
                90deg,
                transparent,
                transparent 25%,
                $multi-step-animation-color 49%,
                $multi-step-animation-color 51%,
                transparent 75%
            );
            background-repeat: no-repeat;
            background-size: 25% 100%;
            animation: slide-shine 3s linear infinite;
            content: '';
        }
    }

    &.mod-multi-step-bar-separated {
        .multi-step-bar:not(:last-child) {
            margin-right: $multi-step-bar-separation;
        }
    }
}

.multi-step-bar {
    display: flex;
    flex: 1;
    align-content: center;
    align-items: center;
    min-height: $multi-step-min-height;
    opacity: 1;
}

.multi-step-bar-text {
    flex: 1;
    padding: $multi-step-bar-text-padding;
    text-align: center;
    cursor: default;
}

.multi-step-bar-content-container,
.multi-step-bar-backdrop-container {
    display: flex;
    flex-wrap: wrap;
}

.multi-step-bar-content-container {
    position: absolute;
    inset: 0;
    z-index: 1;
    color: var(--title-text-color);
}

.multi-step-bar-backdrop-container {
    overflow: hidden;
    color: transparent;
    pointer-events: none;

    .multi-step-bar {
        transform: skewX(-20deg);

        &:first-child {
            margin-left: -$default-margin;
            padding-left: $default-margin;
        }

        &:last-child {
            margin-right: -$default-margin;
            padding-right: $default-margin;
        }
    }

    .multi-step-bar-to-do {
        background-color: $multi-step-to-do-color;
    }

    .multi-step-bar-doing {
        background-color: $multi-step-doing-color;
    }

    .multi-step-bar-done {
        background-color: $multi-step-done-color;
    }

    .multi-step-bar-error {
        background-color: $multi-step-error-color;
    }

    .multi-step-bar-warning {
        background-color: $multi-step-warning-color;
    }
}

@keyframes slide-shine {
    0% {
        background-position: -25% 0;
    }

    100% {
        background-position: 125% 0;
    }
}

@keyframes slide-background {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: $multi-step-sliding-animation-background-width 0;
    }
}

@keyframes shine-background {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}