.b-task-board-base {
    --b-task-board-background                       : var(--b-neutral-94);

    --b-task-board-column-gap                       : 0;
    --b-task-board-column-background                : var(--b-neutral-97);
    --b-task-board-column-header-background         : var(--b-neutral-95);
    --b-task-board-column-header-padding            : 1em;
    --b-task-board-column-headers-sticky-background : var(--b-task-board-background);

    --b-task-board-card-border                      : none;
    --b-task-board-card-border-top-radius           : 0;
    --b-task-board-card-border-bottom-radius        : 0;

    --b-task-board-swimlane-header-background       : var(--b-neutral-100);
    --b-task-board-swimlane-header-border-top       : 1px solid var(--border-color);
    --b-task-board-swimlane-header-border-bottom    : 1px solid var(--border-color);

    /* App specific vars */
    --border-color                                  : var(--b-neutral-90);

    .b-colorize {
        --b-task-board-card-border-top   : 3px solid var(--b-primary-35);
        --b-task-board-card-header-color : var(--b-primary-30);
    }

    .b-theme-material3-dark & {
        --b-task-board-swimlane-header-background : var(--b-neutral-90);
    }

    /* Column borders */
    .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);
        }
    }

    /* Pad headers to align with swimlanes (see below) */
    .b-task-board-column-headers {
        padding-inline-start : 250px;
    }
}

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

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

/* Custom element to display team members. Rendered into swimlanes, before columns */
.team-members {
    width    : 250px;
    overflow : hidden;
    color    : var(--b-task-board-card-body-color);
}

/* Team member */
.member {
    display             : flex;
    flex-direction      : row;
    align-items         : center;
    margin-top          : 1em;
    margin-inline-start : 1em;
    cursor              : pointer;
    font-size           : 0.9em;

    img {
        width             : 2.5em;
        height            : 2.5em;
        border-radius     : 50%;
        margin-inline-end : 1em;
        transition        : scale .2s linear;

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

    &:hover {
        color : var(--b-task-board-swimlane-header-color);

        img {
            scale : 1.05;
        }
    }
}

.b-task-board-task-item {
    order : 1;
}

/* Icon on cards */
.b-task-board-card i {
    order : 0;

    color : var(--b-primary-30);
}

/* Make swimlanes titles push member info to the right */
.b-task-board-swimlane-title {
    flex : 1;
}

.team-info {
    font-size : 0.9em;
}