:root {
    --rank-high-pos-bg: #6FCF6D;
    --rank-med-pos-bg: #A8E6A1;
    --rank-low-pos-bg: #DFF5E1;
    --rank-neutral-bg: #E0E0E0;
    --rank-low-neg-bg: #FDE2E1;
    --rank-med-neg-bg: #FAB7B2;
    --rank-high-neg-bg: #EB5757;
    --rank-text-light: #000000;
}

.rank-chip {
    color: var(--rank-text-light);
}

    .rank-chip.rank-high-pos {
        background-color: var(--rank-high-pos-bg);
        color: var(--rank-text-light);
    }

    .rank-chip.rank-med-pos {
        background-color: var(--rank-med-pos-bg);
        color: var(--rank-text-light);
    }

    .rank-chip.rank-low-pos {
        background-color: var(--rank-low-pos-bg);
        color: var(--rank-text-light);
    }

    .rank-chip.rank-neutral {
        background-color: var(--rank-neutral-bg);
        color: var(--rank-text-light);
    }

    .rank-chip.rank-low-neg {
        background-color: var(--rank-low-neg-bg);
        color: var(--rank-text-light);
    }

    .rank-chip.rank-med-neg {
        background-color: var(--rank-med-neg-bg);
        color: var(--rank-text-light);
    }

    .rank-chip.rank-high-neg {
        background-color: var(--rank-high-neg-bg);
        color: var(--rank-text-light);
    }

.fixed-width-chip {
    justify-content: center;
    min-width: 30px;
    max-width: 30px;
}

.active-filter-chip {
    min-width: 70px;
    max-width: 70px;
    justify-content: center;
}