.b-task-board {
    --catchall-column-background     : var(--b-primary-97);
    --border-color                   : var(--b-neutral-80);

    --b-task-board-background        : var(--b-neutral-100);
    --b-task-board-column-gap        : 1em;
    --b-task-board-card-footer-color : var(--b-neutral-50);

    padding                          : 1em;
}

.b-task-board-column-header {
    border-top-left-radius  : 15px;
    border-top-right-radius : 15px;

    &[data-column="*"] {
        background : var(--catchall-column-background);
    }
}

.b-task-board-column {
    border-bottom-left-radius  : 15px;
    border-bottom-right-radius : 15px;

    &[data-column="*"] {
        background : var(--catchall-column-background);
    }
}

.b-task-board-card {
    border     : 1px solid var(--border-color);
    box-shadow : none;

    &.b-selected {
        border-color : #bbb;
    }

    &.done {
        --b-primary      : var(--b-color-lime);
        background-color : var(--b-primary-96);
    }
}

.b-task-board-card-header i {
    &.high {
        color : var(--b-color-red);
    }

    &.medium {
        color : var(--b-color-orange);
    }

    &.low {
        color : var(--b-color-light-green);
    }
}

.b-task-board-card-footer {
    border-top    : 1px solid var(--border-color);
    padding       : 1em 0;
    margin-inline : 1em;

    i {
        margin-inline-end : .5em;
    }
}

.b-task-board-task-item[data-field="assignee"] {
    font-size : .7em;
}

.b-task-board-task-item[data-field="status"] {
    flex : 1;
}

.avatar-header {
    display        : flex;
    gap            : 0.5em;
    padding        : 0.4em;
    align-items    : center;
    overflow       : auto;
    text-transform : none;
}

.avatar {
    width          : 3em;
    border-radius  : 50%;
    border         : 1px solid var(--border-color);
    outline        : 2px solid #fff;
    outline-offset : -3px;
}

.comments-tooltip .b-tooltip-content {
    display : flex;
    gap     : .5em;
}

.comment {
    display               : grid;
    column-gap            : .5em;
    grid-template-columns : 3.5em 1fr;
}

.author {
    grid-column : 1;
}

.text {
    grid-column : 2;
}

.date {
    grid-column : 2;
    font-size   : .8em;
    opacity     : .7;
}