.project-progress__bar {
    --background-color: var(--root-color--white);
    --border-color: #666666;
}

.project-progress__bar-fill {
    --background-color: var(--root-color--secondary);
}

.project-progress__traffic-light li {
    --background-color: var(--root-color--white);
    --border-color: #666666;
}

.project-progress__traffic-light li:first-child[aria-current] {
    --background-color: var(--root-color--green);
    --border-color: var(--root-color--green);
}

.project-progress__traffic-light li:nth-child(2)[aria-current] {
    --background-color: var(--root-color--orange);
    --border-color: var(--root-color--orange);
}

.project-progress__traffic-light li:nth-child(3)[aria-current] {
    --background-color: var(--root-color--red);
    --border-color: var(--root-color--red);
}

.project-progress__information,
.project-progress__bar-container,
.project-progress__percentage,
.project-progress__traffic-light,
.project-progress__explanation {
    margin-top: 0.75rem;
}

.project-progress__bar {
    border-width: 0.125rem;
    border-style: solid;
    height: 1rem;
}

.project-progress__bar-fill {
    height: 100%;
}

.project-progress__traffic-light {
    display: flex;
    list-style: none;
    padding: 0;
}

.project-progress__traffic-light li {
    border-width: 0.125rem;
    border-style: solid;
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
}

.project-progress__traffic-light li:not(:first-child) {
    margin-left: 0.625rem;
}

.project-progress__cell-header {
    color: var(--color, black);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 0.889em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, bold);
    line-height: var(--line-height, inherit);
}

.project-progress__information,
.project-progress__percentage,
.project-progress__explanation {
    color: var(--color, black);
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 0.889em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    line-height: var(--line-height, inherit);
}

.project-progress__bar {
    background-color: var(--background-color, #ffffff);
    border-color: var(--border-color, #666666);
}

.project-progress__bar-fill {
    background-color: var(--background-color, #009edf);
}

.project-progress__traffic-light li {
    background-color: var(--background-color, #ffffff);
    border-color: var(--border-color, #666666);
}

@media (min-width: 30em) {
    .project-progress__cell {
        border-color: var(--border-color, hsla(0, 0%, 0%, 0.2));
    }
}