:root {
    --border-color : #ddd;
}

.b-project-stats-panel {
    --b-panel-with-header-padding : var(--b-widget-padding-large);

    .b-project-stats-panel-content {

        overflow : auto;

        [data-ref="projectCostField"] {
            --b-label-font-weight      : 600;
            --b-text-field-font-weight : 600;
        }

        .b-tasks {

            .b-name, .b-cost {
                display : inline-flex;
            }

            .b-cost {
                color : var(--color);
            }

            .b-name {
                flex : 1;

                &::before {
                    color             : var(--color);
                    background        : color-mix(in oklab, var(--color), var(--b-mix) 90%);
                    border-radius     : 50%;
                    width             : 1.5em;
                    height            : 1.5em;
                    display           : grid;
                    place-items       : center;
                    margin-inline-end : .5em;
                }
            }

            li:nth-child(1) {
                --color : #f00;

                .b-name::before {
                    content : '1';
                }
            }

            li:nth-child(2) {
                --color : #990;

                .b-name::before {
                    content : '2';
                }
            }

            li:nth-child(3) {
                --color : #090;

                .b-name::before {
                    content : '3';
                }
            }
        }
    }

}

#container > .b-panel > .b-panel-body-wrap > .b-panel-content {
    padding : 0;
}

.b-accordion-panel {
    --b-panel-header-border-bottom : 1px solid var(--b-border-7);
    --b-grid-panel-header-padding  : var(--b-panel-header-padding);
    --b-panel-header-font-size    : 1.1em;
    --b-panel-header-padding      : 1em;

    .b-panel {
        border-bottom : var(--b-panel-header-border-bottom);
    }

    .b-accordion-panel-content {
        padding : 0;
        gap     : 0;
    }

    /* Move badges to make them more readable */
    .b-badge::after {
        inset-inline-end : 6em;
        top              : calc(var(--b-panel-header-padding) / var(--b-badge-font-size));
    }

    .b-panel {
        /* Move badge content to header badge */
        --parent-badge : attr(data-badge);

        &::after {
            content : none;
        }

        header.b-badge::after {
            content : var(--parent-badge);
        }
    }
}

