/* Progress */

.progress-bar {

    --progress-height: 5px;
    --progress-border-radius: 10px;
    --progress-progress-color: var(--theme-black);
    --progress-background-color: var(--theme-light);
    --progress-border-color: var(--theme-light);

    &.positive {
        --progress-progress-color: var(--theme-positive-color);
    }

    display: flex;
    position: relative;
    line-height: 1em;
    border: 1px solid var(--progress-border-color);

    &, & > span {
        height: var(--progress-height, 5px);
        border-radius: var(--progress-border-radius, 10px);
        border-color: var(--progress-border-color);
    }

    background-color: var(--progress-background-color);

    & > span {
        display: inline-flex;
        background-color: var(--progress-progress-color);
    }

}

.progress-item {

    display: flex;
    align-items: center;
    gap: 0 10px;

    .progress-stars {
        display: inline-flex;
        align-items: center;
        font-weight: 400;
        gap: 5px;

        i.icon {
            width: 12px;
            height: 12px;
        }
    }

    .progress-bar {
        display: inline-flex;
        flex: 1 1;
    }

    .progress-percentage {
        display: inline-flex;
        justify-content: end;
        min-width: 32px;
    }

}