/* Version switcher under the sidebar logo and in the mobile header.

   One colour for every version. The brand content colour tracks light and dark
   on its own, and of the two brand tokens it is the one that clears AA contrast
   as small bold text: 5.3:1 against the light sidebar where brand primary, the
   colour Furo gives sidebar links, manages only 3.7:1.

   Grid rather than flex so the chevron can share the control's cell and centre
   against it without wrapping the select in an extra element. */
.rf-version-switcher {
  display: grid;
  grid-template-areas:
    "caption"
    "control";
  gap: 0.3rem;
  padding: 0 var(--sidebar-item-spacing-horizontal)
    var(--sidebar-item-spacing-vertical);
  color: var(--color-brand-content);
}

.rf-version-switcher__caption {
  grid-area: caption;
  color: var(--color-sidebar-caption-text);
  font-size: var(--sidebar-caption-font-size);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rf-version-switcher__current,
.rf-version-switcher__select {
  grid-area: control;
  max-width: 100%;
  padding: 0.3rem 0.6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background-color: var(--color-sidebar-background);
  color: inherit;
  font-family: inherit;
  font-size: var(--sidebar-item-font-size);
  font-weight: 700;
}

.rf-version-switcher__current {
  display: inline-block;
}

.rf-version-switcher__select {
  cursor: pointer;
}

/* Our own chevron: the browser draws its arrow hard against the pill's rounded
   edge and offers no way to move it. Only drawn once the select exists, so a
   build read without addon data keeps a plain label with nothing to open. */
.rf-version-switcher--live .rf-version-switcher__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.9rem;
}

.rf-version-switcher--live::after {
  grid-area: control;
  width: 6px;
  height: 6px;
  margin-right: 0.8rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  align-self: center;
  justify-self: end;
  content: "";
  pointer-events: none;
  transform: translateY(-2px) rotate(45deg);
}

/* Compact variant for the mobile header, where the page title already takes
   most of the row. */
.rf-version-switcher--compact {
  align-items: center;
  justify-content: center;
  padding: 0;
}

.rf-version-switcher--compact .rf-version-switcher__caption {
  display: none;
}

.rf-version-switcher--compact .rf-version-switcher__current,
.rf-version-switcher--compact .rf-version-switcher__select {
  max-width: 8rem;
  padding: 0.15rem 0.4rem;
  background-color: var(--color-header-background);
  font-size: 0.75rem;
}

.rf-version-switcher--compact.rf-version-switcher--live
  .rf-version-switcher__select {
  padding: 0.15rem 1.3rem 0.15rem 0.5rem;
}

.rf-version-switcher--compact.rf-version-switcher--live::after {
  width: 5px;
  height: 5px;
  margin-right: 0.5rem;
  border-width: 1.5px;
  transform: translateY(-1.5px) rotate(45deg);
}

.mobile-header .header-center {
  min-width: 0;
}

.mobile-header .header-center .brand {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}