/* The icon tile: a square of colour with a glyph on top, next to the thing it
   marks.

   It has two jobs and they do not share a palette. A tile that marks a section,
   a category or a counter says nothing with its colour, so it stays neutral and
   the glyph carries the brand. A tile that reports a verdict takes the solid
   colour of that state, which is what makes the verdict readable at a glance.
   Mixing them is what let a listing of reports look like a list of approvals.

   The glyph inherits the colour of its tile, so no screen writes it again. That
   is what the attention tile needs most: its glyph is navy, because white on the
   yellow gives 1.67:1 and cannot be read. */

.symbol.sf-tile .symbol-label {
    background-color: var(--sf-neutral-100);
    color: var(--sf-blue);
}

/* The glyph takes the colour of its tile, and it has to be said out loud: the
   theme paints every `i` of the platform a light grey, and a rule that matches
   always beats inheritance. That grey is what each screen was escaping when it
   wrote `style="color:white"` on its own glyph, and writing it by hand is what
   put white on the yellow. */
.symbol.sf-tile .symbol-label > i,
.symbol.sf-tile .symbol-label > span,
.symbol.sf-tile .symbol-label > svg {
    color: var(--sf-blue);
}

/* The three verdicts a tile reports. They come after the neutral on purpose:
   a screen writes both classes, so a value that names one of the three wins and
   any other value falls back to the neutral marker instead of borrowing a colour
   that already means something. */
.symbol.sf-tile-success .symbol-label {
    background-color: var(--sf-success);
}

.symbol.sf-tile-warning .symbol-label {
    background-color: var(--sf-warning-fill);
}

.symbol.sf-tile-danger .symbol-label {
    background-color: var(--sf-danger);
}

.symbol.sf-tile-success .symbol-label > i,
.symbol.sf-tile-success .symbol-label > span,
.symbol.sf-tile-success .symbol-label > svg,
.symbol.sf-tile-danger .symbol-label > i,
.symbol.sf-tile-danger .symbol-label > span,
.symbol.sf-tile-danger .symbol-label > svg {
    color: var(--sf-white);
}

/* Navy, not white: the yellow of the brand carries navy text on top, and white
   on it gives 1.67:1. */
.symbol.sf-tile-warning .symbol-label > i,
.symbol.sf-tile-warning .symbol-label > span,
.symbol.sf-tile-warning .symbol-label > svg {
    color: var(--sf-text);
}

/* The bar under a metric answers the same question as the tile beside it, so it
   reads the same three verdicts. Without one it is a plain progress bar, and a
   progress bar is blue. */
.progress .progress-bar.sf-meter {
    background-color: var(--sf-blue);
}

.progress .progress-bar.sf-meter-success {
    background-color: var(--sf-success);
}

.progress .progress-bar.sf-meter-warning {
    background-color: var(--sf-warning-fill);
}

.progress .progress-bar.sf-meter-danger {
    background-color: var(--sf-danger);
}