.b-task-board-base {
    --b-task-board-background                        : #fff;

    --b-task-board-column-gap                        : 0;

    --b-task-board-column-background                 : var(--b-neutral-95);
    --b-task-board-column-header-background          : var(--b-neutral-95);
    --b-task-board-column-header-padding             : .25em 1em;

    --b-task-board-card-body-padding                 : 1em;
    --b-task-board-card-header-color                 : #fff;
    --b-task-board-card-header-padding               : .5em 1em;

    --b-task-board-column-header-collapsed-title-top : 2.5em;

    --b-task-board-card-readonly-color               : var(--b-task-board-card-header-color);

    /* App specific vars */
    --border-color                                   : #d8d9da;

    .b-colorize {
        --b-task-board-card-header-background : var(--b-primary-60);
    }
}

.b-task-board-column-header {
    border-bottom : 1px solid var(--border-color);
}

.b-task-board-column-header,
.b-task-board-column {
    border-inline-start : 1px solid var(--border-color);

    &.b-last {
        border-inline-end : 1px solid var(--border-color);
    }
}

.b-task-board-text[data-ref=quarter] {
    border-radius : 50%;
    color         : #fff;
    font-size     : .8em;
    aspect-ratio  : 1 / 1;
    width         : 2em;
    display       : grid;
    place-items   : center;
    background    : var(--b-primary-50);
}

.Q1 {
    --b-primary : var(--b-color-orange);
}

.Q2 {
    --b-primary : var(--b-color-amber);
}

.Q3 {
    --b-primary : var(--b-color-lime);
}

.Q4 {
    --b-primary : var(--b-color-light-green);
}

.b-read-only > .b-task-board-card-header {
    opacity : .6;
}