// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "../../common/variables";
@import "../../common/mixins";
@import "../../common/icons";

/*
Trees

Markup:
<div class="pt-tree pt-elevation-0">
  <ul class="pt-tree-node-list pt-tree-root">
    <li class="pt-tree-node pt-tree-node-expanded">
      <div class="pt-tree-node-content">
        <span class="pt-tree-node-caret pt-tree-node-caret-open pt-icon-standard"></span>
        <span class="pt-tree-node-icon pt-icon-standard pt-icon-folder-close"></span>
        <span class="pt-tree-node-label">Label</span>
        <span class="pt-tree-node-secondary-label">Secondary label</span>
      </div>
      <ul class="pt-tree-node-list">
        <li class="pt-tree-node">
          <div class="pt-tree-node-content">
            <span class="pt-tree-node-caret-none pt-icon-standard"></span>
            <span class="pt-tree-node-icon pt-icon-standard pt-icon-document"></span>
          <span class="pt-tree-node-label">A Document</span>
          </div>
        </li>
        <li class="pt-tree-node">
          <div class="pt-tree-node-content">
            <span class="pt-tree-node-caret-none pt-icon-standard"></span>
            <span class="pt-tree-node-icon pt-icon-standard pt-icon-document"></span>
            <span class="pt-tree-node-label">Another Document</span>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>

Styleguide pt-tree
*/

$tree-row-height: $pt-grid-size * 3 !default;
$tree-icon-spacing: ($tree-row-height - $pt-icon-size-standard) / 2 !default;

.pt-tree-node-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.pt-tree-root {
  // lets us position hover/selection effects based on the width of the whole tree
  position: relative;
  background-color: transparent;
  cursor: default;
  padding-left: 0;
}

@for $i from 0 through 20 {
  .pt-tree-node-content-#{$i} {
    padding-left: ($tree-row-height - $tree-icon-spacing) * $i;
  }
}

.pt-tree-node-content {
  display: flex;
  align-items: center;
  width: 100%;
  height: $tree-row-height;
  padding-right: $pt-grid-size / 2;

  &:hover {
    background-color: rgba($gray5, 0.4);
  }
}

.pt-tree-node-caret,
.pt-tree-node-caret-none {
  position: relative;
  min-width: $pt-grid-size * 3;
  // override default icon styles, which appear first for some reason
  line-height: $tree-row-height !important; // stylelint-disable-line declaration-no-important
}

.pt-tree-node-caret {
  @include pt-icon-colors();
  cursor: pointer;
  text-align: center;

  &::before {
    // lets us rotate with transform
    display: inline-block;
    content: $pt-icon-chevron-right;
    transition: transform ($pt-transition-duration * 2) $pt-transition-ease;
  }

  &.pt-tree-node-caret-open::before {
    transform: rotate(90deg);
  }
}

.pt-tree-node-icon {
  position: relative;
  margin-right: $tree-icon-spacing;
  color: $pt-icon-color;
}

.pt-tree-node-label {
  @include overflow-ellipsis();
  flex: 1 1 auto;
  position: relative;
  user-select: none;

  span {
    // prevents spans from interfering with text overflows (e.g. when Tooltips are used in labels)
    display: inline;
  }
}

.pt-tree-node-secondary-label {
  padding: 0 ($pt-grid-size / 2);
  line-height: $tree-row-height;
  user-select: none;
}

.pt-tree-node.pt-tree-node-selected > .pt-tree-node-content {
  background-color: $pt-intent-primary;

  &,
  #{$icon-classes} {
    color: $white;
  }

  .pt-tree-node-caret {
    &::before {
      color: rgba($white, 0.7);
    }

    &:hover::before {
      color: $white;
    }
  }
}

.pt-dark {
  .pt-tree-node-content:hover {
    background-color: rgba($gray1, 0.3);
  }

  .pt-tree-node-icon {
    color: $pt-dark-icon-color;
  }

  .pt-tree-node.pt-tree-node-selected > .pt-tree-node-content {
    background-color: $pt-intent-primary;
  }
}