/******************************************************************************
 *
 * Copyright (c) 2019, the jupyter-fs authors.
 *
 * This file is part of the jupyter-fs library, distributed under the terms of
 * the Apache License 2.0.  The full license can be found in the LICENSE file.
 *
 */

.jp-tree-finder-sidebar {
  flex-direction: column;
  display: flex;
  flex: 1 1 auto;
  color: var(--jp-ui-font-color1);
  background: var(--jp-layout-color1);
  /* This is needed so that all font sizing of children done in ems is
   * relative to this base size */
  font-size: var(--jp-ui-font-size1);
}

tree-finder-panel {
  flex-direction: column;
  display: flex;
  flex: 1 1 auto;
}

tree-finder-panel tree-finder-grid {
  flex-direction: column;
  display: flex;
  flex: 1 1 auto;
}

tree-finder-panel tree-finder-grid table {
  color: var(--jp-ui-font-color1);
}

.jp-tree-finder-toolbar {
  padding: 0px;
  border-bottom: none;
  height: auto;
  padding: 0px;
  margin: 8px 12px 0px 12px;
  box-shadow: none;
  justify-content: flex-start;
}

.jp-tree-finder-toolbar.jp-Toolbar .jp-Toolbar-item {
  flex: 0 0 auto;
  padding-left: 0px;
  padding-right: 2px;
}

.jp-tree-finder-toolbar.jp-Toolbar .jp-ToolbarButtonComponent {
  width: 40px;
}

.jp-tree-finder {
  --tf-background: var(--jp-layout-color1);
  --tf-font-color: var(--jp-ui-font-color1);

  --tf-breadcrumb-hover-color: var(--jp-layout-color2);

  --tf-row-hover-background: var(--jp-layout-color2);
  --tf-row-hover-color: var(--jp-ui-font-color1);

  --tf-select-background: var(--jp-brand-color1);
  --tf-select-color: var(--jp-ui-inverse-font-color1);

  --tf-font-size: var(--jp-ui-font-size1);
  --tf-font-family: var(--jp-ui-font-family);
}

.jp-tree-finder tree-finder-grid {
  font-family: var(--jp-ui-font-family);
}

.jp-tree-finder tree-finder-grid th,
.jp-tree-finder tree-finder-grid td {
  height: 1lh;
  line-height: normal;
}

.jp-tree-finder tbody th {
  font-weight: normal;
}

.jp-tree-finder th.jfs-mod-loading span.rt-row-header-icon::before {
  content: "";
  background-color: var(--tf-background);
  border: solid 3px var(--jp-ui-font-color1);
  border-bottom-color: var(--jp-brand-color1);
  border-radius: 50%;

  position: absolute;
  width: 1ex;
  height: 1ex;

  animation: load3 1s infinite linear
}

.jp-tree-finder tr.tf-mod-select th.jfs-mod-loading span.rt-row-header-icon::before {
  background-color: var(--tf-select-background);
}

.jp-tree-finder tbody tr:hover:not(.tf-mod-select) th.jfs-mod-loading span.rt-row-header-icon::before {
  background-color: var(--tf-row-hover-background);
}

.jp-tree-finder tree-finder-grid.jfs-mod-loading tbody::before {
  content: "";
  border: solid 5px var(--jp-brand-color1);
  border-radius: 50%;
  border-bottom-color: var(--jp-layout-color1);

  position: absolute;
  width: 3em;
  height: 3em;
  left: calc(50% - 2em);
  top: 4lh;

  animation:
    load3 1s infinite linear,
    fadeIn 1s;
}


@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes load3 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.jp-tree-finder thead th {
  font-weight: 500;
}

.jp-thead-drag-image {
  top: 0px;
  left: 0px;
  color: var(--jp-ui-font-color1);
  font-size: var(--jp-ui-font-size1);
  font-weight: 500; 
}

.jp-tree-finder .tf-filter-input {
  background-color: transparent;
  color: var(--jp-ui-font-color1);
  box-shadow: inset 0 0 0 var(--jp-border-width) var(--jp-input-border-color);
  border: none;
  font-size: var(--tf-font-size);
}

/* Postion icons in the vertical center of the row */
.jp-tree-finder tree-finder-grid .tf-grid-filetype-icon:before {
  background-position: center;
  background-size: 1em;
  min-height: 1lh;
  min-width: 1em;
}

.jp-tree-finder span.rt-tree-group {
  height: 100%;
  margin-left: 0.45em;
  margin-right: 2px;
}

.jp-tree-finder tree-finder-grid td th span.rt-group-leaf,
.jp-tree-finder tree-finder-grid th span.rt-group-leaf {
  margin-left: 1.2em;
}

.jp-tree-finder tree-finder-breadcrumbs .tf-breadcrumbs-icon {
  background-size: 1em;
  min-height: 1em;
  min-width: 1em;
}

.jp-tree-finder tree-finder-breadcrumbs .tf-breadcrumbs-home {
  align-items: center;
}
