@layer components {
  /* A verdict is always three things: the word, its color and its icon shape
   * (a check for pass, a cross for fail), so color is never the only signal. */
  .chip {
    align-items: center;
    background: var(--chip-background);
    border-radius: 999px;
    color: var(--chip-color);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 6px;
    line-height: 18px;
    padding: 4px 10px;
    white-space: nowrap;

    &::before {
      background-color: currentColor;
      block-size: 0.9em;
      content: "";
      flex-shrink: 0;
      inline-size: 0.9em;
      mask: var(--chip-icon) center / contain no-repeat;
    }
  }

  .chip--pass {
    --chip-background: var(--color-pass-tint);
    --chip-color: var(--color-pass);
    --chip-icon: url("/assets/icons/verdict-pass-c525c37d.svg");
  }

  .chip--small {
    font-size: 12px;
    line-height: 16px;
    padding: 2px 8px;
  }

  .chip--fail {
    --chip-background: var(--color-fail-tint);
    --chip-color: var(--color-fail);
    --chip-icon: url("/assets/icons/verdict-fail-71a23869.svg");
  }

  /* Not checked: a check that waits on one that failed. */
  .chip--wait {
    --chip-background: var(--color-placeholder);
    --chip-color: var(--color-muted);
    --chip-icon: url("/assets/icons/verdict-wait-76a268a2.svg");
  }
}