html.crm-standalone {
    --crm-table-even-row: var(--nook-grey-light);
    --crm-table-even-hover: color-mix(in srgb, var(--crm-table-even-row), var(--crm-c-primary) 5%);

    --crm-table-odd-row: var(--crm-c-background4);
    --crm-table-odd-hover: color-mix(in srgb, var(--crm-table-odd-row), var(--crm-c-primary) 5%);

    --crm-table-row-border: 1px solid var(--nook-grey-dark);

    --crm-table-header-bg: var(--crm-c-primary);

    --crm-table-sort-col: var(--crm-c-primary-text);
    --crm-table-header-col: var(--crm-c-primary-text);
    /* --crm-table-sort-float: right; */
}

.crm-container td {
    border-left: var(--crm-table-row-border);
}

.nook-table-col.bubble {
    display: inline-block;
    border-radius: 1rem;
    padding: 0.25rem 1rem;
}

.nook-table-col.none-selected {
    background-color: var(--nook-grey-dark);
}
.nook-table-col.project {
    border: 1px solid var(--crm-c-primary);
}
.nook-table-col.nook-urgency i {
    margin-right: 0.75rem;
}

.crm-search-display th.crm-sortable-col {
    --crm-table-padding: 0.5rem 1rem 0.5rem 1.25rem;
}
/*
TODO: match colors configured in the option group

this will require EITHER generating these class styles dynamically OR
adding the actual color property with an inline style (custom column component)
*/
.nook-urgency {
    --nook-icon-color: var(--nook-c-urgency-none);
}
.nook-urgency.urgency__Low {
    --nook-icon-color: var(--nook-c-urgency-low);
}
.nook-urgency.urgency__Medium {
    --nook-icon-color: var(--nook-c-urgency-medium);
}
.nook-urgency.urgency__High {
    --nook-icon-color: var(--nook-c-urgency-high);
}