/* Version selector (mike) -- see docs/version-grouping.js for the JS half. */

/* ---------------------------------------------------------------------------
 * `variant = "modern"` fixes. Both symptoms look like "mike is broken" while
 * versions.json and `mike list` are perfectly fine.
 *
 * (1) INVISIBLE SELECTOR. mike injects `.md-version` inside
 *     `.md-header__title`, which the modern theme sets to `display: none` in
 *     the logo+tabs layout. The selector is in the DOM at 0x0 until that block
 *     is un-hidden. Un-hide only the block that actually holds a selector, and
 *     keep the page-title topic hidden -- modern shows the title in the tabs
 *     row instead, and resurrecting it here would double up.
 *
 *     The nesting is .md-header__title > .md-header__ellipsis >
 *     .md-header__topic > .md-version, so the `:not(:has(.md-version))` guards
 *     matter: hiding .md-header__ellipsis outright would hide the selector's
 *     own ancestor and leave it measuring 0x0 -- exactly the symptom we are
 *     fixing.
 * ------------------------------------------------------------------------- */
.md-header__title:has(.md-version) {
  display: flex !important;
  align-items: center;
  flex: 0 0 auto; /* don't steal horizontal space from the tabs */
  margin-left: 0.4rem;
  min-width: 0;
  opacity: 1 !important;
}

.md-header__title:has(.md-version) .md-header__ellipsis:not(:has(.md-version)),
.md-header__title:has(.md-version) .md-header__topic:not(:has(.md-version)) {
  display: none;
}

.md-header__title:has(.md-version) .md-header__ellipsis:has(.md-version),
.md-header__title:has(.md-version) .md-header__topic:has(.md-version) {
  display: flex !important;
  align-items: center;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  position: static !important;
}

/* ---------------------------------------------------------------------------
 * (2) SELECTOR SCROLLS AWAY. On scroll the modern theme adds
 *     `.md-header__title--active` and animates the first `.md-header__topic`
 *     out (opacity 0 + translateX + pointer-events: none) to swap in the page
 *     title -- which takes the dropdown with it. Pin the topic that holds the
 *     selector so it stays put and stays clickable.
 * ------------------------------------------------------------------------- */
.md-header__title--active .md-header__ellipsis:has(.md-version),
.md-header__title--active .md-header__topic:has(.md-version),
.md-header__title--active .md-version,
.md-header__title--active.md-header__title:has(.md-version) {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  visibility: visible !important;
  z-index: 1;
}

/* Keep the selector legible against the custom primary colour. */
.md-version__current {
  font-weight: 600;
}

.md-version__list {
  max-height: 60vh;
  overflow-y: auto;
}

.md-version__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Separator between differing MAJOR.MINOR groups (class added by the JS). */
.md-version__link.luna-version-minor-break {
  border-top: 1px solid var(--md-default-fg-color--lightest);
  margin-top: 0.2rem;
  padding-top: 0.4rem;
}

/* The alias badge ("latest") that `alias = true` renders. */
.md-version__alias {
  border-radius: 0.6rem;
  background-color: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.05rem 0.35rem;
  text-transform: uppercase;
}