@layer components {
  .chip {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
  }

  .chip--surface,
  .chip--green,
  .chip--amber,
  .chip--red {
    padding: 0.0625rem 0.625rem;
    border: var(--xf-border-thin);
    border-radius: var(--xf-radius-pill);
    color: var(--xf-ink);
    font-family: var(--xf-font-body);
    font-size: 0.8125rem;
    letter-spacing: normal;
  }

  .chip--surface { background: var(--xf-surface); }
  .chip--green { background: var(--xf-green-soft); }
  .chip--amber { background: var(--xf-amber); }
  .chip--red { background: var(--xf-red-soft); }
}