/* Omnibox overlay (xtralab:omnibox): a centered search box over the shell. */

/*
 * The widget node is attached to `document.body` (outside the shell) and only
 * carries theme variables via `jp-ThemedContainer`; the React tree renders the
 * fixed full-screen overlay below it.
 */
.jp-xtralab-Omnibox {
  position: absolute;
}

/* Transparent full-viewport layer that centers the panel and catches
   click-outside to dismiss. */
.jp-xtralab-Omnibox-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.jp-xtralab-Omnibox-panel {
  display: flex;
  flex-direction: column;
  width: min(640px, 92vw);
  max-height: 60vh;
  overflow: hidden;

  /* Drop just below the top bar so it reads as a command-center dropdown. */
  margin-top: calc(var(--jp-private-menubar-height, 28px) + 4px);
  background: var(--jp-layout-color1);
  border: var(--jp-border-width) solid
    color-mix(in srgb, var(--jp-border-color1) 55%, transparent);
  border-radius: 10px;
  box-shadow: var(--jp-elevation-z6);
}

.jp-xtralab-Omnibox-input {
  padding: 11px 14px;
  font-family: var(--jp-ui-font-family);
  font-size: var(--jp-ui-font-size2);
  color: var(--jp-ui-font-color0);
  background: transparent;
  border: none;
  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
  outline: none;
}

.jp-xtralab-Omnibox-input::placeholder {
  color: var(--jp-ui-font-color3);
}

/* Side gutters float the active-row highlight inside the panel edge,
   matching the menu/palette treatment; section headers and items shift
   together so their left alignment is preserved. */
.jp-xtralab-Omnibox-results {
  padding: 5px 6px;
  overflow-y: auto;
}

.jp-xtralab-Omnibox-sectionHeader {
  /* 8px + the results container's 6px gutter = the item rows' 14px inset. */
  padding: 6px 8px 2px;
  font-size: var(--jp-ui-font-size0);
  font-weight: 600;
  color: var(--jp-ui-font-color2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.jp-xtralab-Omnibox-item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  font-size: var(--jp-ui-font-size1);
  color: var(--jp-ui-font-color1);
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 120ms ease-out;
}

/* Translucent foreground wash (not an opaque layout color) so the
   highlight reads correctly on the frosted panel background. */
.jp-xtralab-Omnibox-item.jp-mod-active {
  background: color-mix(in srgb, var(--jp-ui-font-color1) 8%, transparent);
}

.jp-xtralab-Omnibox-itemIcon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: 16px;
  height: 16px;
}

.jp-xtralab-Omnibox-itemIcon svg {
  width: 16px;
  height: 16px;
}

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

.jp-xtralab-Omnibox-match {
  font-weight: 600;
  color: var(--jp-ui-font-color0);
}

.jp-xtralab-Omnibox-itemCaption {
  flex: 0 1 auto;
  max-width: 45%;
  overflow: hidden;
  font-size: var(--jp-ui-font-size0);
  color: var(--jp-ui-font-color3);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jp-xtralab-Omnibox-empty {
  /* 8px + the results container's 6px gutter = the item rows' 14px inset. */
  padding: 14px 8px;
  font-size: var(--jp-ui-font-size1);
  color: var(--jp-ui-font-color2);
}