:root {
    /* App specific vars */
    --border-color   : var(--b-neutral-80);
    --details-color  : #aaa;
    --header-prio    : '';
    --tag-background : var(--b-primary-95);
    --tag-color      : var(--b-primary-40);
}

.b-task-board-base {
    --b-task-board-background                        : var(--b-primary-100);

    --b-task-board-column-gap                        : 0;
    --b-task-board-column-background                 : var(--b-neutral-98);
    --b-task-board-column-header-background          : var(--b-neutral-97);
    --b-task-board-column-header-padding             : 1em;
    --b-task-board-column-header-border-bottom       : 1px solid var(--border-color);
    --b-task-board-column-separator-border           : 1px solid var(--border-color);

    --b-task-board-card-border-top-radius            : 5px;
    --b-task-board-card-border-bottom-radius         : 5px;

    --b-task-board-column-header-collapsed-title-top : 2.5em;

    flex                                             : 1;

    .b-task-board-column-header {
        height : 57px;
    }
}

/* Only change these default colors for non-high-contrast themes */
body:not(.b-theme-high-contrast-light) {
    --b-task-board-column-count-background : var(--b-neutral-92);

    .b-colorize {
        --b-task-board-progress-item-color : var(--b-primary-80);
    }
}

.b-theme-high-contrast-light {
    --border-color : var(--b-neutral-10);

    .b-task-board-card-header::after {
        background      : var(--b-primary-40);
        color           : var(--b-primary-100);
    }
}

#container > .b-panel > .b-panel-body-wrap > .b-panel-content {
    padding : 0;
}

.b-task-board-card-header::after {
    width           : 4em;
    height          : 2em;
    border-radius   : 5px;
    font-size       : .75em;
    display         : flex;
    justify-content : center;
    align-items     : center;

    background      : var(--b-primary-95);
    color           : var(--b-primary-40);
    content         : var(--header-prio);
}

[data-prio=high] {
    --b-primary   : var(--b-color-red);
    --header-prio : 'high';
}

[data-prio=medium] {
    --b-primary   : var(--b-color-orange);
    --header-prio : 'med';

}

[data-prio=low] {
    --b-primary   : var(--b-color-green);
    --header-prio : 'low';
}

.config-panel {
    width                        : 15em;
    min-width                    : 11em;
    max-width                    : 25em;

    --b-container-gap            : 2em;

    --b-panel-header-font-size   : 1.2em;
    --b-panel-header-font-weight : var(--b-task-board-column-header-font-weight);

    header.b-panel-header {
        height        : 57px;

        border-bottom : 1px solid var(--border-color);
    }

    .section-label {
        width       : 100%;
        margin      : 1em 0 0 0;
        font-weight : 500;
    }
}