/*
 * version-switcher.css — API version dropdown in the header right cluster.
 * Pill-shaped trigger with current version label + chevron, dropdown
 * menu listing all available versions with a check on the active one.
 *
 * Toggle behaviour lives in static/js/nav.js (same delegated dropdown
 * handler already used by the site switcher — single pattern, single
 * "click outside / Escape closes everything" rule).
 */

.version-switcher {
  position: relative;
  flex-shrink: 0;
}

.version-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  height: 2rem;
  padding: 0 var(--space-2_5);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.version-switcher-trigger:hover {
  background: hsl(var(--accent));
}
.version-switcher-trigger svg {
  width: 0.875rem;
  height: 0.875rem;
  color: hsl(var(--muted-foreground));
}

/* Menu — anchored to the trigger, opens downward. */
.version-switcher-menu {
  position: absolute;
  top: calc(100% + var(--space-1_5));
  right: 0;
  min-width: 12rem;
  padding: var(--space-1_5);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--popover));
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px hsl(0 0% 0% / 0.25);
  z-index: var(--z-modal);
}

.version-switcher-title {
  padding: var(--space-1_5) var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
}

.version-switcher-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1_5) var(--space-2);
  border: none;
  background: transparent;
  color: hsl(var(--foreground));
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 150ms ease;
}
.version-switcher-item:hover {
  background: hsl(var(--accent));
}
.version-switcher-item.is-current {
  color: hsl(var(--foreground));
  font-weight: 500;
}
.version-switcher-item svg {
  width: 0.875rem;
  height: 0.875rem;
  color: hsl(var(--muted-foreground));
}