/* Small labels: vegetarian, spicy, other dietary labels, and the rule chip of an option group. */

@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
  }

  .badge--veg {
    background: var(--veg-soft);
    color: var(--veg);
  }

  .badge--spice {
    background: var(--spice-soft);
    color: var(--spice);
  }

  .badge--mild {
    background: var(--gold-soft);
    color: var(--gold-text);
  }

  /* The spice level comes from the translations in lower case: "pittig" reads as "Pittig", like the dietary labels. */
  .badge--mild,
  .badge--spice {
    text-transform: capitalize;
  }

  .badge .icon {
    width: 0.875rem;
    height: 0.875rem;
  }
}