.progress {
    width: 100%;
    height: 4px;
    overflow: hidden;
    background-color: var(--grey-light);
    border-radius: var(--border-radius-round);
}
.progress-bar {
    height: inherit;
    border-radius: inherit;
    background-color: var(--progress-color);
    width:0%;
    /*transition: width 0.6s ease;*/
    transition: width 1.6s ease-in-out;
}

.bar-primary {
    --progress-color: var(--black);
}
.bar-secondary {
    --progress-color: var(--crimson-blaze);
}

.progress-group {
    /*must give width when placed inside a flex-box*/
    display: flex;
    align-items: center;
    gap: 8px;
}
.percent-progress {
    color: var(--subdued);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-light);
    width: 27px; /*to avoid bar length change on different percent numbers*/
    flex-shrink: 0;
}