:root {
    --high          : #ffb5a1;
    --medium        : #ffddab;
    --low           : #b3ffb3;
    --high-strong   : #ffaf99;
    --medium-strong : #ffd699;
    --low-strong    : #99ff99;
}

.b-task-board-base {
    --b-task-board-body-padding                : 2em;

    --b-task-board-card-box-shadow             : null;
    --b-task-board-card-header-padding         : .75em;
    --b-task-board-card-body-padding           : .75em;
    --b-task-board-card-footer-padding         : .75em;

    --b-task-board-card-hover-box-shadow       : null;
    --b-task-board-card-hover-transform        : null;

    --b-task-board-card-selected-box-shadow    : null;
    --b-task-board-card-selected-transform     : null;
    --b-task-board-card-selected-animation     : null;

    --b-task-board-column-border-radius        : 0 0 3px 3px;

    --b-task-board-column-header-border-radius : 3px 3px 0 0;

    --done-card-opacity                        : 0.5;

    .b-colorize {
        --b-task-board-card-header-background : var(--b-primary-90);
    }
}

.b-task-board-card {
    overflow   : hidden;
    transition : transform .2s ease, height .2s ease-in;

    /* Highlight body of selected cards */
    &.b-selected {
        background : linear-gradient(#ffffffcc, #ffffffcc) var(--b-primary);
    }

    /* Fade done cards out a bit */
    &[data-column=done]:not(.b-selected) {
        opacity : var(--done-card-opacity);
    }
}

/* Text above the colored dot */
.b-task-board-text {
    z-index : 1;
}

/* Headers have pale background color */
.b-task-board-card-header {
    transition : background .2s linear;

    /* Colored dot showing prio */
    &::after {
        background    : var(--b-primary);
        width         : 1em;
        height        : 1em;
        content       : '';
        border-radius : 50%;
        transform     : scale(1);
        transition    : transform .15s linear;
        order         : 200;
    }
}

.b-task-board-card {
    /* Enlarge the dot when hovering / selected */
    &:hover .b-task-board-card-header::after {
        transform : scale(1.3);
    }

    &.b-selected {
        .b-task-board-card-header {
            background : var(--b-primary);
        }

        .b-task-board-card-header::after {
            transform : scale(50);
        }
    }

    /* Color by prio */
    &.high {
        --b-primary : var(--high-strong);
    }

    &.medium {
        --b-primary : var(--medium-strong);
    }

    &.low {
        --b-primary : var(--low-strong);
    }
}

.b-theme-high-contrast-light {
    .b-task-board {
        --done-card-opacity : .8;
    }

    .b-colorize {
        --b-task-board-card-header-background : var(--b-primary-20);
        --b-task-board-card-header-color      : var(--b-neutral-100);
    }

    .b-task-board-card.b-selected {
        --b-task-board-card-header-color : var(--b-neutral-0);
    }
}