/* The state chip: a state said in words, with its colour as the second way of
   saying it.

   It takes the tint of its state with the state's own ink on top. The solid
   colour belongs to the icon tile, and mixing the two forms is what put two
   greens on the same card. A status that names none of the three states lands
   on the neutral pair, which is also the pair of a chosen value in a dropdown,
   instead of borrowing a colour that already means something. */

.sf-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    background-color: var(--sf-neutral-100);
    color: var(--sf-neutral-700);
}

.sf-chip-success {
    background-color: var(--sf-success-soft);
    color: var(--sf-success);
}

.sf-chip-warning {
    background-color: var(--sf-warning-soft);
    color: var(--sf-warning-ink);
}

.sf-chip-danger {
    background-color: var(--sf-danger-soft);
    color: var(--sf-danger);
}

/* A dot in the ink of the chip, for a chip that reports something live — a
   connection, a synchronisation. It repeats the colour and adds nothing a reader
   of the text would miss, so it is hidden from screen readers where it is used. */
.sf-chip-dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: currentColor;
}