.b-grid.b-grid-base {
    --green                                                    : var(--b-color-green);
    --light-blue                                               : var(--b-color-light-blue);
    --blue                                                     : var(--b-color-blue);
    --gray                                                     : var(--b-color-gray);
    --yellow                                                   : var(--b-color-orange);

    --faded-color                                              : color-mix(in oklab, currentColor, transparent 90%);

    --icon-background-fade                                     : #ffffffc0;

    --avatar-size                                              : 2.5em;

    /* No special background on checkbox column */
    --b-grid-cell-checkbox-selection-background                : var(--b-grid-cell-background);
    --b-grid-cell-checkbox-selection-hover-background          : var(--b-grid-cell-hover-background);
    --b-grid-cell-checkbox-selection-selected-background       : var(--b-grid-cell-selected-background);
    --b-grid-cell-checkbox-selection-hover-selected-background : var(--b-grid-cell-hover-selected-background);
}

.b-percent-bar-cell .b-percent-bar-outer {
    border-radius       : .5em;
    overflow            : hidden;
    height              : .7em;
    margin-inline-start : 2em;

    .b-percent-bar {
        background-color : var(--light-blue);
    }
}

div[data-column="cost"] {
    justify-content : space-between;
}

/* Member images */
.avatar-container {
    display         : flex;
    justify-content : flex-start;
    width           : 100%;
    column-gap      : .3em;
}

.avatar {
    height : var(--avatar-size);
    width  : var(--avatar-size);

    &:before {
        background-size  : contain;
        position         : absolute;
        border-radius    : 50%;
        content          : '';

        width            : var(--avatar-size);
        height           : var(--avatar-size);
        background-image : var(--background);
        background-color : var(--b-primary-90);
    }
}

.badge {
    border-radius : 1em;
    padding       : 0.4em 0.8em;
    text-align    : center;
    min-width     : 6em;
    font-size     : .8em;

    background    : var(--faded-color);
}

.b-completed {
    opacity : 0.4;
}

.b-grid-cell[data-column="project"] {
    display               : grid;
    grid-template-columns : auto 1fr;
    align-content         : center;
    column-gap            : .6em;

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

    .category-icon {
        font-size         : 1.2em;
        grid-row          : 1 / 3;
        margin-inline-end : .3em;
        border-radius     : 50%;
        width             : 2em;
        height            : 2em;
        align-items       : center;
        display           : flex;
        justify-content   : center;

        background        : var(--faded-color);

        &.fa-pencil-ruler {
            color : var(--gray);
        }

        &.fa-paint-roller {
            color : var(--green);
        }

        &.fa-fan {
            color : var(--blue);
        }

        &.fa-fire {
            color : var(--light-blue);
        }

        &.fa-broom {
            color : #795548;
        }

        &.fa-bolt {
            color : var(--yellow);
        }

        &.fa-elevator {
            color : #555;
        }
    }
}

/* The up/down arrow next to cost amount */
.diffLabel {
    display       : flex;
    align-items   : center;
    padding       : 0.2em 0.8em;
    border-radius : 1em;
    font-size     : 0.8em;
    font-weight   : 300;
    margin-inline : auto 1em;
    gap           : 0.5em;

    background    : var(--faded-color);

    &.up {
        color : var(--b-color-red);
    }

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