:root {
    --rt-progress-height: calc(var(--rt-ui-height) - 2px);
    --rt-progress-border: var(--rt-ui-border);
    --rt-progress-bg-dark: hsl(0, 0%, 19%);
    --rt-progress-bg-light: hsl(0, 0%, 15%);
    --rt-progress-stripe-size: 22.62px;
    --rt-progress-primary-dark: #4a9d4a;
    --rt-progress-primary-light: #5eb85e;
    --rt-progress-secondary-dark: #3a7ab8;
    --rt-progress-secondary-light: #4d8dc7;
    --rt-progress-label-color: var(--rt-text-inverse);
    --rt-progress-label-size: 13px;
}

.progress-wrapper {
    position: relative;
    width: 100%;
}

.progress-bar {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    width: 100%;
    height: var(--rt-progress-height);
    border: 1px solid var(--rt-progress-border);
    box-sizing: content-box;
    display: block;
}

.progress-bar::-webkit-progress-bar {
    background: repeating-linear-gradient(
        135deg,
        var(--rt-progress-bg-dark) 0,
        var(--rt-progress-bg-dark) 8px,
        var(--rt-progress-bg-light) 8px,
        var(--rt-progress-bg-light) 16px
    );
}

.progress-bar {
    background: repeating-linear-gradient(
        135deg,
        var(--rt-progress-bg-dark) 0,
        var(--rt-progress-bg-dark) 8px,
        var(--rt-progress-bg-light) 8px,
        var(--rt-progress-bg-light) 16px
    );
}

.progress-bar--primary::-webkit-progress-value {
    background: repeating-linear-gradient(
        -45deg,
        var(--rt-progress-primary-dark) 0,
        var(--rt-progress-primary-dark) 8px,
        var(--rt-progress-primary-light) 8px,
        var(--rt-progress-primary-light) 16px
    );
    background-size: var(--rt-progress-stripe-size) var(--rt-progress-stripe-size);
}

.progress-bar--primary::-moz-progress-bar {
    background: repeating-linear-gradient(
        -45deg,
        var(--rt-progress-primary-dark) 0,
        var(--rt-progress-primary-dark) 8px,
        var(--rt-progress-primary-light) 8px,
        var(--rt-progress-primary-light) 16px
    );
    background-size: var(--rt-progress-stripe-size) var(--rt-progress-stripe-size);
}

.progress-bar--secondary::-webkit-progress-value {
    background: repeating-linear-gradient(
        -45deg,
        var(--rt-progress-secondary-dark) 0,
        var(--rt-progress-secondary-dark) 8px,
        var(--rt-progress-secondary-light) 8px,
        var(--rt-progress-secondary-light) 16px
    );
    background-size: var(--rt-progress-stripe-size) var(--rt-progress-stripe-size);
}

.progress-bar--secondary::-moz-progress-bar {
    background: repeating-linear-gradient(
        -45deg,
        var(--rt-progress-secondary-dark) 0,
        var(--rt-progress-secondary-dark) 8px,
        var(--rt-progress-secondary-light) 8px,
        var(--rt-progress-secondary-light) 16px
    );
    background-size: var(--rt-progress-stripe-size) var(--rt-progress-stripe-size);
}

.progress-bar--static-animated::-webkit-progress-value,
.progress-bar--static-animated::-moz-progress-bar {
    animation: progressBarStripes 0.7s linear infinite;
}

@keyframes progressBarStripes {
    0% { background-position: 0 0; }
    100% { background-position: var(--rt-progress-stripe-size) 0; }
}

.progress__label {
    position: absolute;
    font-size: var(--rt-progress-label-size);
    font-weight: bold;
    color: var(--rt-progress-label-color);
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 5px;
    pointer-events: none;
}