.b-task-board-base {
    --b-task-board-background                     : var(--b-neutral-98);
    --b-task-board-column-background              : transparent;
    --b-task-board-column-header-background       : transparent;
    --b-task-board-swimlane-header-font-size      : 1.1em;
    --b-task-board-card-gap                       : 3em;
    --b-task-board-card-header-font-weight        : 500;
    --b-task-board-card-border-top-radius         : .5em;
    --b-task-board-card-border-bottom-radius      : .5em;
    --b-task-board-column-header-font-size        : 1.1em;
    --b-task-board-column-header-font-weight      : 500;
    --b-task-board-column-header-padding          : 1em;
    --b-task-board-swimlane-header-text-transform : none;
    --b-task-board-swimlane-header-background     : var(--b-neutral-100);
    --b-task-board-swimlane-header-border-top     : 1px solid var(--b-neutral-90);
    --b-task-board-swimlane-header-border-bottom  : 1px solid var(--b-neutral-90);
    --b-task-board-swimlane-header-padding        : 1em;

    .b-task-board-card-header {
        flex-flow   : column;
        align-items : flex-start;
        gap         : 1em;

        &::before {
            content       : '';
            width         : 4em;
            height        : .5em;
            background    : var(--b-primary-80);
            border-radius : .5em;
        }
    }
}

.b-theme-material3-dark {
    .b-task-board-base {
        --b-task-board-background                       : var(--b-neutral-100);
        --b-task-board-swimlane-header-background       : var(--b-neutral-95);
        --b-task-board-column-headers-sticky-background : var(--b-neutral-100);
    }
}

.b-task-board-card {
    font-size : 1.1em;
}

.b-task-board-column-body {
    padding-top : 3em;
}

.b-task-board-template[data-field=team] div,
.b-task-board-swimlane-title::after {
    display        : flex;
    align-items    : center;
    height         : 2em;
    padding-inline : 1em;
    border-radius  : 1em;
    font-size      : .8em;

    color          : var(--color);
    background     : color-mix(in srgb, var(--color), transparent 80%);
}

.b-task-board-template[data-field=team] div {
    &.devs {
        --color : #364fc7;
    }

    &.sales {
        --color : #e64980;
    }

    &.mrkt {
        --color : #12b886;
    }

    &.mgmt {
        --color : #7950f2;
    }

    &.hr {
        --color : #be4bdb;
    }
}

[data-lane="devs"] .b-task-board-swimlane-title::after {
    content : 'devs';
    --color : #364fc7;
}

[data-lane="sales"] .b-task-board-swimlane-title::after {
    content : 'sales';
    --color : #e64980;
}

[data-lane="mrkt"] .b-task-board-swimlane-title::after {
    content : 'mrkt';
    --color : #12b886;
}

[data-lane="mgmt"] .b-task-board-swimlane-title::after {
    content : 'mgmt';
    --color : #7950f2;
}

[data-lane="hr"] .b-task-board-swimlane-title::after {
    content : 'hr';
    --color : #be4bdb;
}