/* Sit in DocC's sticky navigation bar, left of its language toggle. The selector
   stays outside DocC's application root, so it is positioned over the bar. */
#c2pa-doc-version-selector {
  position: fixed;
  top: 0;
  right: 9.5rem;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 52px;
  color: var(--color-nav-color, var(--color-text, CanvasText));
  font: 14px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#c2pa-doc-version-selector select {
  color: inherit;
  background: transparent;
  border: 1px solid var(--color-grid, GrayText);
  border-radius: 4px;
  padding: 0 0.25rem;
  font: inherit;
}

#c2pa-doc-version-selector option {
  background: var(--color-fill, Canvas);
}

/* Below this width DocC folds the language toggle into a menu behind the
   button at the right edge, so the selector moves up beside that button. */
@media (max-width: 1023px) {
  #c2pa-doc-version-selector {
    right: 3.5rem;
  }
}

@media (max-width: 735px) {
  #c2pa-doc-version-selector {
    right: 3rem;
    height: 48px;
  }
}

/* Leave room for the navigation title on the narrowest phones; the select keeps
   its accessible name. */
@media (max-width: 419px) {
  #c2pa-doc-version-selector {
    font-size: 0;
  }

  #c2pa-doc-version-selector select {
    font-size: 14px;
  }
}

@media print {
  #c2pa-doc-version-selector {
    display: none;
  }
}