.op3-element[data-op3-element-type="courselistitemcontent"] {
    &:hover::before {
        border: 0 none;
    }

    // Fixed progress bar status by element state.
    &[data-op3-element-spec="available"]   .op3-element[data-op3-element-spec="courselistprogress"] .op3-progressbar-progress { width:   0%; }
    &[data-op3-element-spec="in_progress"] .op3-element[data-op3-element-spec="courselistprogress"] .op3-progressbar-progress { width:  50%; }
    &[data-op3-element-spec="completed"]   .op3-element[data-op3-element-spec="courselistprogress"] .op3-progressbar-progress { width: 100%; }
    &[data-op3-element-spec="dripped"]     .op3-element[data-op3-element-spec="courselistprogress"] .op3-progressbar-progress { width:  25%; }
    &[data-op3-element-spec="locked"]      .op3-element[data-op3-element-spec="courselistprogress"] .op3-progressbar-progress { width:   5%; }
}