/**
 * @file
 * Chip — one status word on the shared scale (tokens/status.css).
 *
 * Restyle with: --otb-chip-radius, --otb-chip-padding, --otb-chip-gap,
 * --otb-chip-font-family, --otb-chip-font-size, --otb-chip-font-weight,
 * --otb-chip-letter-spacing, --otb-chip-text-transform, --otb-chip-dot-size;
 * small size: --otb-chip-padding-sm, --otb-chip-font-size-sm.
 * Colours come from --otb-status-*.
 */

.otb-chip {
  --_text: var(--otb-status-neutral-text);
  --_fill: var(--otb-status-neutral-fill);

  display: inline-flex;
  align-items: center;
  gap: var(--otb-chip-gap, 0.375rem);
  padding: var(--otb-chip-padding, 0.1875rem 0.625rem);
  border-radius: var(--otb-chip-radius, var(--border-radius-sm, 6px));
  background: var(--_fill);
  color: var(--_text);
  font-family: var(--otb-chip-font-family, var(--font-family-base, inherit));
  font-size: var(--otb-chip-font-size, var(--font-size-2xs, 0.75rem));
  font-weight: var(--otb-chip-font-weight, 600);
  line-height: 1.4;
  letter-spacing: var(--otb-chip-letter-spacing, 0.03em);
  text-transform: var(--otb-chip-text-transform, uppercase);
  white-space: nowrap;
}

.otb-chip--dot::before {
  content: "";
  flex: none;
  width: var(--otb-chip-dot-size, 0.375rem);
  height: var(--otb-chip-dot-size, 0.375rem);
  border-radius: 50%;
  background: currentColor;
}

.otb-chip--sm {
  padding: var(--otb-chip-padding-sm, 0.0625rem 0.5rem);
  font-size: var(--otb-chip-font-size-sm, var(--font-size-3xs, 0.6875rem));
}

.otb-chip--good {
  --_text: var(--otb-status-good-text);
  --_fill: var(--otb-status-good-fill);
}

.otb-chip--attention {
  --_text: var(--otb-status-attention-text);
  --_fill: var(--otb-status-attention-fill);
}

.otb-chip--problem {
  --_text: var(--otb-status-problem-text);
  --_fill: var(--otb-status-problem-fill);
}

.otb-chip--info {
  --_text: var(--otb-status-info-text);
  --_fill: var(--otb-status-info-fill);
}