:root {
    --padding : 2em;
}

.b-task-board-base {
    --app-border-color                         : var(--b-primary-90);

    --b-task-board-background                  : var(--b-primary-98);
    --b-task-board-body-padding                : var(--padding);
    --b-task-board-column-gap                  : var(--padding);

    --b-task-board-card-border                 : none;
    --b-task-board-card-border-top-radius      : .5em;
    --b-task-board-card-border-bottom-radius   : .5em;
    --b-task-board-card-body-padding           : 1em;

    --b-task-board-column-header-box-shadow    : 0 2px 5px rgba(0, 0, 0, 0.1);
    --b-task-board-column-header-border-radius : .5em .5em 0 0;
    --b-task-board-column-header-background    : var(--b-neutral-98);
    --b-task-board-column-background           : var(--b-neutral-98);
    --b-task-board-column-box-shadow           : 0 2px 5px rgba(0, 0, 0, 0.1);
    --b-task-board-column-border-radius        : 0 0 .5em .5em;

    --b-task-board-card-box-shadow             : var(--b-elevation-1);

    .b-colorize {
        --b-task-board-column-header-border-top : .5em solid var(--b-primary-80);
    }

    .b-task-board-column-headers {
        padding-top : 0;
    }
}

.b-task-board-body-wrap > .b-toolbar {
    border     : none;
    overflow   : visible;

    background : var(--b-task-board-background);
    padding    : var(--padding);

    .b-toolbar-content {
        padding  : 0;
        overflow : visible;
    }
}

/* Above headers box-shadow */
.b-task-board-column {
    z-index : 3;
}

.b-task-board-template[data-field=prio] {
    text-transform : capitalize;
    font-size      : .8em;
    align-self     : flex-start;
    padding        : .2em .4em;
    color          : #fff;
    border-radius  : 3px;
    opacity        : 0.5;
    background     : var(--b-primary-65);

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

    &.medium {
        --b-primary : var(--b-color-light-blue);
    }

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

.b-task-board-template[data-field=description] {
    display : block;

    span {
        font-weight : bold;
    }
}

.b-task-board-template[data-field=deadline] {
    color     : var(--b-neutral-80);
    flex      : 1;
    font-size : .9em;

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

.b-team-members {
    display         : flex;
    gap             : 0.5em;
    justify-content : flex-end;
    width           : 100%;
    overflow        : visible;

    img {
        width         : 2.5em;
        height        : 2.5em;
        border-radius : 50%;
        transition    : all .2s;
        cursor        : pointer;
        background    : var(--b-primary-85);

        &:hover {
            scale : 1.1;
        }
    }
}

.b-project-combo {
    --b-text-field-outlined-border-width       : 0;
    --b-text-field-outlined-focus-border-width : 0;
    --b-text-field-outlined-input-padding      : 0;
    --b-text-field-input-font-size             : 1.4em;
    --b-text-field-outlined-background         : transparent;
}