:root {
    /* These need to be set on root because the popover appends to the bottom of the body */
    --color-approved: var(--secondary-teal-11);
    --color-rejected: var(--secondary-teal-d3);
}

.OdaProgressBar {
    padding: 0 15px;
}

.OdaProgressBar .GanttSidebarSection-content {
    align-content: flex-start;
    color: var(--text-color);
    display: flex;
    flex-wrap: wrap;

    /* Absolute height so there's no jumping when the progress count appears */
    height: 60px;
}

.OdaProgressBar-bar {
    border-radius: 6px;
    height: 12px;
    margin-top: 4px;
    width: 100%;
}

.OdaProgressBar-approvedBar,
.OdaProgressBar-popoverLegend--approved {
    background-color: var(--color-approved);
}

.OdaProgressBar-rejectedBar,
.OdaProgressBar-popoverLegend--rejected {
    background-color: var(--color-rejected);
}

.OdaProgressBar-popoverLegend--approved,
.OdaProgressBar-popoverLegend--rejected {
    display: inline-block;
    height: 16px;
    width: 16px;
}