.op3-element[data-op3-element-type$="courseprogressbar"] {
    .op3-progressbar-progress {
        // Default value. This value will be overriden on frontend!
        width: 50%;
    }
    .op3-progressbar-content[data-opb-course-progressbar-state="not-started"] .op3-progressbar-progress {
        width: 0;
    }
    .op3-progressbar-content[data-opb-course-progressbar-state="complete"] .op3-progressbar-progress {
        width: 100%;
    }

    .op3-progressbar-content:not([data-opb-course-progressbar-state="not-started"]) .op3-text--not-started,
    .op3-progressbar-content:not([data-opb-course-progressbar-state="in-progress"]) .op3-text--in-progress,
    .op3-progressbar-content:not([data-opb-course-progressbar-state="complete"]) .op3-text--complete {
        display: none;
    }
}