.b-task-board {
    --b-task-board-card-header-font-weight : 700;
    --b-task-board-progress-item-height    : 1px;
    --b-task-board-card-body-padding       : 1em;
    --b-task-board-column-header-padding   : 1em;
}

.b-colorize {
    --b-task-board-card-header-color        : var(--b-primary-20);
    --b-task-board-card-header-background   : var(--b-primary-97);
    --b-task-board-progress-item-background : var(--b-neutral-90);
    --b-task-board-progress-item-color      : var(--b-primary-30);
    --b-task-board-card-border              : 1px solid var(--b-primary-30);
}

.b-task-board-card {
    &.critical {
        --b-primary : var(--b-color-red);
    }
    &.high {
        --b-primary : var(--b-color-orange);
    }
    &.normal {
        --b-primary : var(--b-color-gray);
    }
    &.low {
        --b-primary : var(--b-color-green);
    }

    &[data-column="done"] {
        opacity : .8;
    }
}

.b-task-board-card-header {
    border-bottom : var(--b-task-board-card-border)
}

.b-task-board-task-item.app-task-data {
    flex-direction : column;
    flex-wrap      : wrap;
    white-space    : nowrap;
    align-items    : flex-start;
}

.app-task-label {
    &::before {
        display : inline-block;
        content : attr(data-label);
        width   : 7em;
    }
}

.app-task-chip {
    padding       : 0.1em 0.75em;
    font-size     : 0.8em;
    font-weight   : 500;
    border-radius : 12px;

    background    : var(--b-neutral-100);
    border        : 1px solid var(--b-primary-30);
    color         : var(--b-primary-30);
}