.b-task-board-base {
    --b-task-board-body-padding                : 2em;
    --b-task-board-column-gap                  : 2em;

    --b-task-board-card-body-padding           : 0 1em 1em 1em;

    --b-task-board-column-header-box-shadow    : 0 2px 2px rgba(0, 0, 0, 0.2);
    --b-task-board-column-header-border-radius : .5em .5em 0 0;
    --b-task-board-column-background           : var(--b-neutral-97);
    --b-task-board-column-header-background    : var(--b-neutral-97);
    --b-task-board-column-box-shadow           : 0 2px 2px rgba(0, 0, 0, 0.2);
    --b-task-board-column-border-radius        : 0 0 .5em .5em;

    .b-colorize {
        --b-task-board-column-header-border-top : 6px solid var(--b-primary-80);
    }
}

/* Above headers box-shadow */
.b-task-board-column {
    z-index : 3;
}

.b-task-board-card-header::after {
    width           : 4em;
    height          : 2em;
    border-radius   : 5px;
    font-size       : .75em;
    color           : #fff;
    display         : flex;
    justify-content : center;
    align-items     : center;
    background      : color-mix(in srgb, var(--background), var(--b-mix) 20%);
    content         : var(--content);
}

.high {
    --background : #D94E41;
    --content    : 'high';
}

.medium .b-task-board-card-header::after {
    --background : #F2785C;
    --content    : 'med';
}

.low .b-task-board-card-header::after {
    --background : #A8BF56;
    --content    : 'low';
}

.b-task-board-column-header {
    &[data-column=todo] {
        --b-primary : #ffa000;
    }

    &[data-column=doing] {
        --b-primary : #0097a7;
    }

    &[data-column=review] {
        --b-primary : #7cb342;
    }

    &[data-column=done] {
        --b-primary : #388e3c;
    }
}

.b-task-board-tooltip {
    h1 {
        grid-column : span 2;
        font-size   : 1.3em;
        margin      : 0 0 .5em 0;
        font-weight : 500;
    }

    label {
        font-weight : 500;
    }

    .low, .medium, .high {
        display     : flex;
        align-items : center;
        gap         : .5em;
    }

    .low::before,
    .medium::before,
    .high::before {
        content       : '';
        width         : 1em;
        height        : 1em;
        border-radius : 50%;
    }

    .low::before {
        background : #A8BF56;
    }

    .medium::before {
        background : #F2785C;
    }

    .high::before {
        background : #D94E41;
    }
}