@keyframes turbo-sweep {
    0% {
        transform: translateX(-105%);
    }

    100% {
        transform: translateX(350%);
    }
}

button.item-button .name {
    padding-left: 0.3em;
    padding-right: 0.3em;
}

.progress-text {
    position: absolute;
    left: 0.2em;
    color: white;
    top: 50%;
    transform: translateY(-53%);
    padding-right: 0.3em;
}

.progress-bar {
    --bar-bg: rgb(12, 101, 173);

    position: relative;
    background-color: var(--bar-bg);
    width: 100%;
    border-radius: 0.1em;
    overflow: hidden;
    box-shadow: inset 0 0.05em 0.15em rgba(0, 0, 0, 0.6);
}

.progress-fill {
    --fill-bg: rgb(46, 148, 231);
    --fill-shadow: rgba(255, 255, 255, 0.2);
    --grad-bot-shadow: rgba(0, 0, 0, 0.15);

    --turbo-mid-color: rgb(0, 210, 255);
    --turbo-glow: rgba(0, 195, 255, 0.7);

    height: 1.6em;
    background-color: var(--fill-bg);
    background-image: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.25) 0%,
            rgba(255, 255, 255, 0) 50%,
            var(--grad-bot-shadow) 100%);
    box-shadow: 0 0.05em 0.1em var(--fill-shadow) inset;
}

.progress-fill.progress-turbo {
    position: relative;
    overflow: hidden;
    background: var(--fill-bg);
    box-shadow: 0 0 0.6em var(--turbo-glow);
}

.progress-fill.progress-turbo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%, var(--grad-bot-shadow) 100%);
    pointer-events: none;
}

.progress-fill.progress-turbo::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--turbo-mid-color), transparent);

    will-change: transform;
    animation: turbo-sweep 1.5s linear infinite;
}

.progress-bar.hero {
    --bar-bg: rgb(108, 59, 59);
}

.progress-fill.hero {
    --fill-bg: rgb(165, 60, 21);
    --fill-shadow: rgba(255, 255, 255, 0.15);
    --grad-bot-shadow: rgba(0, 0, 0, 0.25);

    --turbo-mid-color: rgb(255, 140, 0);
    --turbo-glow: rgba(255, 115, 0, 0.7);
}

.progress-fill.breakthrough {
    filter: saturate(0.5) brightness(0.8);
}

/* small pbs */

.req-progress-container {
    background-color: #333;
    width: 100%;
    height: 0.25em;
    margin-top: 0.25em;
    border-radius: 0.125em;
    /*display: none; */
    visibility: hidden;
    position: relative;
    clip-path: inset(-0.625em -0.625em -0.625em -0.625em);
}

.req-pending-bar,
.req-progress-bar {
    background-color: currentColor;
    height: 100%;
    width: 0%;
    border-radius: 0.125em;
    transition: width 0.1s ease;
    position: absolute;
    left: 0;
    top: 0;
}

.req-pending-bar {
    opacity: 0.5;
}

.button-collapse .req-pending-bar {
    opacity: 0.75;
}

.req-progress-bar {
    z-index: 2;
}


.req-pending-bar.is-complete,
.req-progress-bar.is-complete {
    box-shadow: 0 0 0.5em currentColor, 0 0 0.1875em currentColor;
}