/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
@import "~@bentley/ui-core/lib/ui-core/style/themecolors";
@import "~@bentley/ui-core/lib/ui-core/scrollbar";

.components-controlledTree-loader {
  position: relative;
  display: block;
  left: calc(50% - 24px);
  top: calc(50% - 24px);
}

.components-controlledTree-errorMessage {
  font-style: italic;
  color: $buic-foreground-muted;
  margin: 0 20%;
  text-align: center;
}

.components-controlledTree {
  color: $buic-foreground-body;
  background-color: $buic-background-control;

  /**
   * Workaround for horizontal scroll issue.
   * based on https://github.com/bvaughn/react-virtualized/issues/1248
   */
  .ReactVirtualized__Grid,
  .ReactWindow__VariableSizeList {
    overflow: auto !important;
    background-color: inherit;

    @include uicore-scrollbar;

    &:focus {
      outline: none;
    }

    >div {
      overflow: visible !important;
      max-width: none !important;
    }
  }

  .node-wrapper {
    // The virtualized list wants to use absolute layout, but we
    // need the inner container to grow in width based on the widest
    // node. To workaround, we use relative layout with 0 heigh nodes.
    position: relative !important;
    height: 0 !important;
    width: fit-content !important;
    min-width: 100% !important;
    overflow: visible !important;

    &.is-selected {
      // Prevent selected node's borders from being overdrawn by non-selected neighbors
      z-index: 1;
    }

    .core-tree-node {
      &.is-focused, &:focus {
        outline: none;
      }
    }
  }

  @mixin enable-border($edge) {
    border-#{$edge}: 1px solid $buic-foreground-primary;
    padding-#{$edge}: 0;
  }

  .node-wrapper.is-selected {
    .core-tree-node {
      @include enable-border("left");
      @include enable-border("right");
    }
  }

  .node-wrapper.is-selected:first-child,
  .node-wrapper:not(.is-selected)+.node-wrapper.is-selected {
    .core-tree-node {
      @include enable-border("top");
    }
  }

  .node-wrapper.is-selected+.node-wrapper:not(.is-selected) {
    .core-tree-node {
      @include enable-border("top");
    }
  }

  .node-wrapper.is-selected:last-child {
    .core-tree-node {
      @include enable-border("bottom");
    }
  }
}