.b-chip .b-sort-icon {
    cursor : pointer;
}

.rank {
    display       : grid;
    place-items   : center;
    width         : 2.5em;
    padding-block : .25em;
    border-radius : .25em;
    font-size     : 1.2em;

    background    : color-mix(in oklab, var(--rank-color), transparent 90%);
    color         : color-mix(in oklab, var(--rank-color), var(--b-opposite) 10%);

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

    &.ok {
        --rank-color : var(--b-color-orange);
    }

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