/*
    See the JupyterLab Developer Guide for useful CSS Patterns:

    https://jupyterlab.readthedocs.io/en/stable/developer/css.html
*/

.jp-xtralab-FileBrowser {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  overflow: hidden;
  background-color: var(--jp-layout-color1);

  /*
   * Map @pierre/trees CSS variables to the active JupyterLab theme. The
   * `*-override` variants take precedence over the library's defaults, so
   * these values track the JupyterLab theme automatically — no JS needed
   * when the theme switches.
   */
  --trees-bg-override: var(--jp-layout-color1);
  --trees-bg-muted-override: var(--jp-layout-color2);
  --trees-fg-override: var(--jp-ui-font-color1);
  --trees-fg-muted-override: var(--jp-ui-font-color2);
  --trees-status-ignored-override: var(--jp-ui-font-color2);
  --trees-accent-override: var(--jp-brand-color1);
  --trees-border-color-override: var(--jp-border-color2);
  --trees-indent-guide-bg-override: var(--jp-border-color3);
  --trees-input-bg-override: var(--jp-input-background);
  --trees-search-bg-override: var(--jp-input-background);
  --trees-search-fg-override: var(--jp-ui-font-color1);
  --trees-focus-ring-color-override: var(--jp-brand-color1);
  --trees-selected-bg-override: var(--jp-brand-color1);
  --trees-selected-fg-override: var(--jp-ui-inverse-font-color1);
  --trees-selected-focused-border-color-override: var(--jp-brand-color1);
  --trees-font-family-override: var(--jp-ui-font-family);
  --trees-font-size-override: var(--jp-ui-font-size1);

  /*
   * Push the search box, the scroll wrapper, and every row inside the
   * tree away from the sidebar edge. `--trees-padding-inline` is the
   * outer gutter the @pierre/trees host uses for the search box and the
   * scroll container, and the row strip sits inside that gutter — so
   * matching the 12px the JupyterLab toolbar uses on its sides keeps
   * the toolbar buttons, the search bar, and the row hover/selection
   * highlights vertically aligned. Row content padding stays at the
   * default 4px so the icon → text rhythm doesn't change.
   */
  --trees-padding-inline-override: 12px;
  --trees-item-padding-x-override: 4px;

  /* Must carry a length unit. The library subtracts this from
     `--trees-padding-inline` inside a `calc()`; a unitless `0` makes the
     subtraction type-invalid, the whole padding-inline rule drops out,
     and the rows snap back to the sidebar edge. */
  --trees-item-margin-x-override: 0px;
}

/*
 * Match the spacing the default file browser uses around its top toolbar
 * (8px above, 12px on each side, flush with the content below). Without
 * this, the toolbar inherits jp-Toolbar's default border + padding which
 * looks heavier than the rest of the JupyterLab sidebar.
 */
.jp-xtralab-FileBrowser-toolbar.jp-Toolbar {
  flex: 0 0 auto;
  height: auto;
  margin: 8px 12px 0;
  padding: 0;
  border-bottom: none;
  box-shadow: none;
}

.jp-xtralab-FileBrowser-toolbar.jp-Toolbar::part(positioning-region) {
  row-gap: 12px;
}

.jp-xtralab-FileBrowser-toolbar > .jp-Toolbar-item {
  flex: 0 0 auto;
  padding-left: 0;
  align-items: center;
  height: unset;
}

.jp-xtralab-FileBrowser-toolbar > .jp-Toolbar-item .jp-ToolbarButtonComponent {
  width: 28px;
}

/*
 * Promote the "new launcher" button to the same blue, wider call-to-action
 * the default file browser uses for `launcher:create`. The selectors mirror
 * the rules in `@jupyterlab/launcher-extension/style/base.css`, but target
 * our own command id and toolbar wrapper class.
 */
.jp-xtralab-FileBrowser-toolbar
  > .jp-Toolbar-item
  .jp-ToolbarButtonComponent[data-command='xtralab:new-launcher'] {
  width: 72px;
  background: var(--jp-accept-color-normal, var(--jp-brand-color1));
}

.jp-xtralab-FileBrowser-toolbar
  > .jp-Toolbar-item
  .jp-ToolbarButtonComponent[data-command='xtralab:new-launcher']:hover {
  background-color: var(--jp-accept-color-hover);
}

.jp-xtralab-FileBrowser-toolbar
  > .jp-Toolbar-item
  .jp-ToolbarButtonComponent[data-command='xtralab:new-launcher']:focus-visible {
  background-color: var(--jp-accept-color-active, var(--jp-brand-color0));
}

.jp-xtralab-FileBrowser-toolbar
  > .jp-Toolbar-item
  .jp-ToolbarButtonComponent[data-command='xtralab:new-launcher']
  .jp-icon3 {
  fill: var(--jp-layout-color1);
}

.jp-xtralab-FileBrowser-content {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.jp-xtralab-FileBrowser-content > div {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.jp-xtralab-FileBrowser file-tree-container {
  flex: 1 1 auto;
  min-height: 0;
}

/*
 * Drag image shown next to the cursor while dragging files out of the
 * tree. Mirrors the visual weight of the default file browser's drag
 * preview without depending on its DOM.
 */
.jp-xtralab-DragImage {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background-color: var(--jp-layout-color1);
  border: 1px solid var(--jp-border-color2);
  border-radius: 6px;
  color: var(--jp-ui-font-color1);
  font-family: var(--jp-ui-font-family);
  font-size: var(--jp-ui-font-size1);
  pointer-events: none;
}

.jp-xtralab-DragImage-icon {
  display: inline-flex;
  align-items: center;
}

.jp-xtralab-DragImage-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background-color: var(--jp-brand-color1);
  border-radius: 8px;
  color: var(--jp-ui-inverse-font-color1);
  font-size: var(--jp-ui-font-size0);
  line-height: 1;
}