@import "constants";

.folders-tree-container {
  background-color: $color-concrete;
  border-radius: 4px;
  height: 250px;
  overflow: auto;
  padding: .5em;
  --row-height: 36px;

  .jstree-wholerow-hovered {
    background: $color-alto;
    border-radius: 4px;
  }

  .jstree-wholerow-clicked {
    background: $color-white;
    border-radius: 4px;
  }

  .jstree-search {
    color: unset;
    font-style: unset;
    font-weight: unset;
  }

  .jstree-leaf {
    height: var(--row-height);

    .jstree-clicked {
      height: var(--row-height);
    }

    .jstree-hovered {
      height: var(--row-height);
    }
  }

  .jstree-closed {
    line-height: var(--row-height);
  }

  .jstree-open {
    line-height: var(--row-height);
  }

  .jstree-icon {
    &.root-folder {
      color: $color-volcano;
    }

    &.icon-folder {
      color: $brand-primary-light;
    }
  }

  .jstree-default-large .jstree-icon {
    background-image: image-url("32px.png");
  }

  .jstree-default-large>.jstree-container-ul .jstree-loading>.jstree-ocl {
    background: image-url("throbber.gif") center no-repeat;
  }
}