.b-task-board-base {
    --b-task-board-body-padding                 : 2em;
    --b-task-board-column-gap                   : 1em;
    --b-task-board-background                   : var(--b-neutral-100);
    --b-task-board-column-background            : var(--b-neutral-98);
    --b-task-board-column-border-radius         : 1em;
    --b-task-board-column-header-background     : var(--b-task-board-column-background);
    --b-task-board-column-header-padding        : 1.25em .75em 1em;
    --b-task-board-column-header-border-radius  : 1em 1em 0 0;
    --b-task-board-column-header-border-top     : none;
    --b-task-board-column-header-box-shadow     : none;
    --b-task-board-column-header-font-weight    : 700;
    --b-task-board-card-gap                     : .75em;
    --b-task-board-card-padding                 : 1em;
    --b-task-board-card-border-top-radius       : .5em;
    --b-task-board-card-border-bottom-radius    : .5em;
    --b-task-board-card-header-gap              : .5em;
    --b-task-board-card-body-gap                : .5em;
    --b-task-board-card-footer-gap              : .5em;
    --b-task-board-card-box-shadow              : none;
    --b-task-board-resource-avatars-avatar-size : 2.5em;
}

.b-colorize {
    --b-task-board-card-background : var(--b-primary-98);
    --b-task-board-card-border     : 1px solid var(--b-primary-85);
    --b-avatar-background          : var(--b-neutral-90);
    --b-avatar-initials-color      : var(--b-neutral-30);
}

/* Sprint title + summary in the toolbar */
.b-top-toolbar {
    padding    : 0 1em;
    background : transparent;

    .sprint-info {
        display     : flex;
        align-items : center;
        gap         : .75em;
    }

    .sprint-name {
        font-size   : 1.5em;
        font-weight : 700;
    }

    .sprint-meta {
        color : var(--b-neutral-50);
    }
}

/* Column header: count, name, WIP / points and a fill bar along the bottom edge */
.b-task-board-column-header {
    position : relative;
}

/* No top spacing below the toolbar, keep the inline padding so headers line up with the columns below */
.b-task-board-column-headers {
    padding-top : 0;
}

.column-title {
    display     : flex;
    align-items : baseline;
    gap         : .5em;

    .column-count {
        font-size   : 1.6em;
        font-weight : 700;
        line-height : 1;
        color       : var(--b-primary);
    }

    .column-meta {
        font-size   : .8em;
        font-weight : 400;
        color       : var(--b-neutral-50);
    }

    .column-fill {
        position      : absolute;
        inset-inline  : .75em;
        bottom        : 0;
        height        : 3px;
        border-radius : 3px;
        background    : var(--b-neutral-90);
        overflow      : hidden;

        > span {
            display    : block;
            height     : 100%;
            background : var(--b-primary);
        }
    }
}

.b-task-board-card-header {
    font-size   : .8em;
    font-weight : 400;
}

/* Ticket id + category */
.b-task-board-task-item[data-ref="ticket"] {
    flex  : 1;
    color : var(--b-neutral-50);

    .ticket {
        font-family : ui-monospace, monospace;
    }

    .category {
        font-weight : 600;
        color       : var(--b-primary);
    }
}

/* High prio badge */
.b-task-board-task-item[data-ref="prio"] {
    --b-primary   : var(--b-color-red);
    padding       : .2em .6em;
    border-radius : .4em;
    font-weight   : 600;
    background    : color-mix(in srgb, var(--b-primary), transparent 90%);
    color         : var(--b-primary-20);
}

.b-task-board-text[data-ref="name"] {
    font-size   : 1.1em;
    font-weight : 700;
    color       : var(--b-neutral-10);
}

.b-task-board-text[data-ref="text"] {
    font-size : .9em;
    color     : var(--b-neutral-40);
}

.b-task-board-card-footer {
    align-items : center;
    margin-top  : .25em;
    font-size   : .85em;
    white-space : nowrap;
    color       : var(--b-neutral-40);

    .due-soon {
        color : var(--b-color-orange);
    }
}

/* Story points chip, in the column color */
.b-task-board-task-item[data-ref="points"] {
    padding       : .2em .5em;
    border-radius : .3em;
    font-weight   : 700;
    background    : var(--b-primary-60);
    color         : var(--b-neutral-100);
}


/* Separator dot between due date and activity */
.b-task-board-task-item[data-ref="activity"] {
    min-width     : 0;
    overflow      : hidden;
    text-overflow : ellipsis;
}

.b-resource-avatar {
    border : 2px solid var(--b-neutral-100);
}

/* Horizontal groups have their headers in a shared row above the columns, join them into one panel */
.b-task-board-body:not(.b-vertical-column-groups) {
    .b-task-board-column {
        border-start-start-radius : 0;
        border-start-end-radius   : 0;
    }

    /* Square the corners where the members of a group meet, so the group reads as one panel */
    .b-column-group-hbox {
        > :not(:last-child) {
            border-start-end-radius : 0;
            border-end-end-radius   : 0;
        }

        > :not(:first-child) {
            border-start-start-radius : 0;
            border-end-start-radius   : 0;
        }
    }
}

.b-theme-high-contrast .b-task-board-card {
    border-color : var(--b-primary);
}