/* Command bar pill in the top bar toolbar (xtralab:command-bar). */

/*
 * The widget is a settings-driven item of JupyterLab's top bar toolbar
 * (`#jp-top-bar`, factory "TopBar"), declared in schema/command-bar.json with
 * a rank past the toolbar's built-in spacer, so it sits at the trailing end of
 * the toolbar next to the right-sidebar toggle button.
 *
 * The widget's root (`.jp-xtralab-CommandBar`) is a plain wrapper that takes
 * the core `.jp-Toolbar > .jp-Toolbar-item` sizing — full toolbar height,
 * centered flex — so it needs no rules of its own; the pill button inside
 * keeps its own compact height. It is styled with the theme's input-field
 * fill so it reads as a search box and tracks each theme's input styling
 * across light and dark (a flat layout color is near-black in some dark
 * themes).
 */
.jp-xtralab-CommandBar-button {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  align-items: center;
  width: clamp(160px, 16vw, 220px);
  height: 20px;
  padding: 0 8px;
  margin: 0;
  overflow: hidden;
  font-family: var(--jp-ui-font-family);
  font-size: var(--jp-ui-font-size1);
  color: var(--jp-ui-font-color2);
  text-align: left;
  cursor: pointer;
  background: var(--jp-input-background);
  border: var(--jp-border-width) solid var(--jp-border-color1);
  border-radius: 10px;
  appearance: none;
}

.jp-xtralab-CommandBar-button:hover {
  color: var(--jp-ui-font-color1);
  border-color: var(--jp-border-color0);
}

.jp-xtralab-CommandBar-button:focus-visible {
  outline: var(--jp-border-width) solid var(--jp-brand-color1);
  outline-offset: 1px;
}

.jp-xtralab-CommandBar-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.jp-xtralab-CommandBar-icon svg {
  width: 14px;
  height: 14px;
}

/* The built-in JupyterLab search icon (@jupyterlab/ui-components) paints with a
   fixed `jp-icon3` theme gray; override it to currentColor so the magnifier
   tracks the pill's text color and brightens with the label on hover. */
.jp-xtralab-CommandBar-button .jp-icon3[fill] {
  fill: currentcolor;
}

.jp-xtralab-CommandBar-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keyboard-shortcut hint, pushed to the trailing edge by the growing label. */
.jp-xtralab-CommandBar-shortcut {
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 1px 4px;
  font-size: var(--jp-ui-font-size0);
  line-height: 1.2;
  color: var(--jp-ui-font-color3);
  border: var(--jp-border-width) solid var(--jp-border-color1);
  border-radius: 4px;
}