/**
 * A badge shown alongside a user.
 *
 * User badges provide additional detail about a user. These are provided by
 * extensions.
 *
 * Badges should have a standard style, but can be specialized to include
 * custom colors.
 *
 * Version Added:
 *     8.0

 * DOM Attributes:
 *     role (string):
 *         Set to "listitem".
 *
 * Structure:
 *     <span class="rb-c-user-badge [...]"
 *           role="listitem">
 *      text...
 *     </span>
 */
.rb-c-user-badge {
  background: var(--ink-p-cool-grey-300);
  border-radius: var(--ink-u-border-radius-l);
  color: var(--ink-p-fg);
  font-size: var(--ink-u-font-s);
  font-weight: normal;
  padding: var(--ink-u-spacing-xs) var(--ink-u-spacing-sm);
}


/**
 * A group of badges to show alongside a user.
 *
 * Version Added:
 *     8.0
 *
 * DOM Attributes:
 *     aria-label (string):
 *         Set to "Badges", or something more specific.
 *
 *     role (string):
 *         Set to "list".
 *
 * Structure:
 *     <span class="rb-c-user-badges"
 *           role="list"
 *           aria-label="Badges">
 *      <span class="rb-c-user-badge ...">...</span> [1+]
 *     </span>
 */
.rb-c-user-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ink-u-spacing-s);
}
