/* ==========================================================================
   The server-region badge in the topbar.

   Sized to the icon buttons it sits among -- same 34px height, same hover
   treatment -- with room for the two-letter code. The mark inherits
   currentColor, so nothing here needs a dark-mode twin.
   ========================================================================== */

/* `.btn.vr-region`, not `.vr-region`: these stylesheets are injected BEFORE
   bootstrap-compat.css and style.css -- that is the order the static app loads
   them in -- so a single class loses every tie against `.btn`. Two classes
   wins it without an !important anywhere. */
.btn.vr-region {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--gray-500);
  line-height: 1;
  border: 1px solid transparent;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.btn.vr-region:hover,
.btn.vr-region:focus-visible {
  color: var(--primary);
  background: var(--primary-transparent);
  border-color: var(--border-color);
}

.btn.vr-region .vr-region-code {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  /* Tabular figures keep US and IN the same width, so the row does not shift
     when the region changes. */
  font-variant-numeric: tabular-nums;
}

.btn.vr-region svg { flex: 0 0 auto; }