.b-task-board-base {
    --label-width                    : 7em;

    --b-task-board-card-body-padding : 1em 1em 1.5em 1em;
}

.b-colorize {
    --b-task-board-card-header-background : var(--b-primary-90);
    --b-task-board-progress-item-color    : var(--b-primary-90);
}

/* Color box in column headers */
.b-task-board-column-header-padder::before {
    content       : '';
    width         : 1em;
    height        : 1em;
    border-radius : 3px;
    align-self    : center;

    background    : var(--b-primary-85);
}

/* Fake label before progress items */
.b-task-board-progress::before {
    display     : block;
    overflow    : clip;
    flex-shrink : 0;
    content     : 'Progress:';

    width       : var(--label-width);
    color       : var(--b-task-board-card-body-color);
}

.b-task-board-card-header {
    [data-ref="text"] {
        display     : flex;
        flex        : 1;
        gap         : .5em;
        font-weight : 500;
    }
}

.b-task-board-card-body {
    label {
        width       : var(--label-width);
        flex-shrink : 0;
        overflow    : clip;

    }

    [data-ref="prio"] {
        display : flex;

        .task-prio {
            display : flex;
            gap     : .25em;

            &::before {
                display       : block;
                content       : '';
                width         : 1em;
                height        : 1em;
                border-radius : 3px;
                align-self    : center;
                flex-shrink   : 0;
            }

            &.task-prio-low::before,
            &.task-prio-medium::before {
                background : color-mix(in oklab, var(--b-color-gray), var(--b-mix) 70%);
            }

            &.task-prio-high::before {
                background : color-mix(in oklab, var(--b-color-red), var(--b-mix) 70%);
            }
        }
    }

    [data-ref="team"] {
        display : flex;
    }
}

.b-small-cards {
    --label-width : 0;
}

.b-task-board-card-header .b-task-board-chart {
    width  : 70px;
    height : 30px;
}

.b-task-board-card-body .b-task-board-chart {
    width  : 100%;
    height : 120px;
}