/**
 * LocaleBadge — small inline badge shown next to a localised field label.
 *
 * Override handle: `.byline-locale-badge`
 */

.badge,
:global(.byline-locale-badge) {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  margin-left: 0.375rem;
  padding: 0.125rem 0.375rem;
  border: var(--border-width-thin) var(--border-style-solid) var(--yellow-400);
  border-radius: var(--border-radius-sm);
  background-color: var(--yellow-100);
  color: var(--yellow-800);
  font-size: 0.6rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  vertical-align: middle;
}

/* ─── Dark theme variants ───────────────────────────────────── */

:is([data-theme="dark"], :global(.dark)) {
  .badge,
  :global(.byline-locale-badge) {
    border-color: var(--yellow-700);
    background-color: oklch(from var(--yellow-900) l c h / 0.4);
    color: var(--yellow-400);
  }
}