/* The risk scale: where a risk score falls, said the same way on every screen.

   A band modifier only declares the colour and the tint of its band. Each piece
   then takes the one it needs: a chip names the band over the tint with navy on
   top, and a gauge arc, a bar or a dot takes the solid colour. Most solid colours
   of the scale are too light to be read over white, so they never print a word
   and never stand for the band alone: the number and the name go next to them. */

.sf-risk-minimal { --sf-risk-color: var(--sf-risk-1); --sf-risk-ground: var(--sf-risk-1-soft); }
.sf-risk-low { --sf-risk-color: var(--sf-risk-2); --sf-risk-ground: var(--sf-risk-2-soft); }
.sf-risk-medium { --sf-risk-color: var(--sf-risk-3); --sf-risk-ground: var(--sf-risk-3-soft); }
.sf-risk-high { --sf-risk-color: var(--sf-risk-4); --sf-risk-ground: var(--sf-risk-4-soft); }
.sf-risk-critical { --sf-risk-color: var(--sf-risk-5); --sf-risk-ground: var(--sf-risk-5-soft); }
.sf-risk-nodata { --sf-risk-color: var(--sf-risk-none); --sf-risk-ground: var(--sf-risk-none-soft); }

.sf-chip[class*="sf-risk-"] {
    background-color: var(--sf-risk-ground);
    color: var(--sf-text);
}

.sf-risk-bar[class*="sf-risk-"] {
    background-color: var(--sf-risk-color);
}

.sf-risk-dot {
    display: inline-block;
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background-color: var(--sf-risk-color);
}