/* Generated by brand/scripts/build-components.mjs from brand/components/. Do not edit. Load public/tokens/tokens.css first. */

/* Chip: a short tag in a box (a filter, a category, a count). --accent marks the one that is on. */
.nu-chip {
  display: inline-flex;
  box-sizing: border-box;
  min-height: var(--nu-ui-chip, var(--nu-control-chip));
  align-items: center;
  gap: var(--nu-space-6);
  border: var(--nu-border-width) solid var(--nu-color-border);
  border-radius: var(--nu-radius-default);
  padding: 0 var(--nu-ui-chip-pad, var(--nu-space-10));
  background: var(--nu-color-surface);
  font-family: var(--nu-font-family-sans);
  font-size: var(--nu-size-caption);
  font-weight: var(--nu-font-weight-regular);
  white-space: nowrap;
  color: var(--nu-color-ink);
}

.nu-chip--accent {
  border-color: var(--nu-color-accent);
  color: var(--nu-color-accent);
}

button.nu-chip {
  cursor: pointer;
}

button.nu-chip:hover {
  border-color: var(--nu-color-accent);
}

button.nu-chip:focus-visible {
  outline: var(--nu-border-focus) solid var(--nu-color-accent);
  outline-offset: var(--nu-border-focus);
}

.nu-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nu-space-8);
}