@layer components {
  .pill {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    background: var(--color-gray-200);
    color: var(--color-gray-600);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);

    &.pill--info {
      background: var(--color-primary-100);
      color: var(--color-primary-700);
    }
  }
}