@layer components {
  .pips {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    vertical-align: middle;
  }

  .pip {
    width: var(--space-3);
    height: var(--space-3);
    border-radius: 50%;
    border: 1px solid var(--color-border);
  }

  .pip--w {
    background: var(--pip-white);
  }

  .pip--u {
    background: var(--pip-blue);
  }

  .pip--b {
    background: var(--pip-black);
  }

  .pip--r {
    background: var(--pip-red);
  }

  .pip--g {
    background: var(--pip-green);
  }

  .pip--c {
    background: var(--pip-colorless);
  }
}