// Lightning Design System 2.12.0
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

@import 'deprecate';

/**
 *
 * @summary A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed.
 *
 * @name base
 * @selector .slds-tree_container
 * @restrict div
 * @support dev-ready
 * @variant
 * @s1 false
 */
.slds-tree-container,
.slds-tree_container {
  @include deprecate('4.0.0', '.slds-tree-container is deprecated, use .slds-tree_container instead.');
  min-width: rem(120px);
  max-width: rem(400px);

  > .slds-text-heading_label,
  > .slds-text-heading--label {
    margin-bottom: $spacing-x-small;
  }
}

/**
 * @summary Initializes a slds tree
 * @selector .slds-tree
 * @restrict .slds-tree_container ul, table
 */

/**
 * @summary Initializes a slds tree item
 * @selector .slds-tree__item
 * @restrict .slds-tree div
 */
.slds-tree__item {
  display: flex;
  padding: ($spacing-xx-small + $spacing-xxx-small) 0 ($spacing-xx-small + $spacing-xxx-small) $spacing-medium;
}

/**
 * @name item-hovered
 * @summary Hover state for a tree item
 * @selector .slds-is-hovered
 * @restrict .slds-tree__item
 * @notes Class should be applied via Javascript
 * @modifier
 * @group interactions
 */
.slds-tree__item.slds-is-hovered,
.slds-tree__item:hover {
  background: $color-background-row-hover;
  cursor: pointer;
}

/**
 * @name item-disabled
 * @summary When a branch doesn't have children, apply slds-is-disabled to the button icon
 * @selector .slds-is-disabled
 * @restrict .slds-tree__item button
 * @modifier
 * @group interactions
 */
.slds-tree__item .slds-is-disabled {
  visibility: hidden;
}

/**
 * @summary Styles the focus and selected state for any tree item that has role="treeitem"
 * @selector [role="treeitem"]
 * @restrict .slds-tree li
 */
.slds-tree [role="treeitem"]:focus {
  outline: 0;

  > .slds-tree__item {
    background: $color-background-row-hover;
    cursor: pointer;
    text-decoration: underline;
  }
}

.slds-tree [role="treeitem"][aria-selected="true"] > .slds-tree__item {
  background: $brand-primary-transparent-10;
  box-shadow: $brand-primary 4px 0 0 inset;

  @include rtl() {
    box-shadow: $brand-primary -4px 0 0 inset;
  }
}

.slds-tree [role="treeitem"] > [role="group"] {
  display: none;
}

.slds-tree [role="treeitem"][aria-expanded="true"] > [role="group"] {
  display: block;
}

// scss-lint:disable SelectorDepth
[aria-expanded="false"] > .slds-tree__item .slds-button__icon {
  transition: $duration-promptly transform ease-in-out;
  transform: rotate(0deg);
}

[aria-expanded="true"] > .slds-tree__item .slds-button__icon {
  transition: $duration-promptly transform ease-in-out;
  transform: rotate(90deg);

  @include rtl() {
    transform: rotate(-90deg);
  }
}
// scss-lint:enable SelectorDepth

// This is only going 20 levels deep for now -- it may have to be expanded later if people are building deep deep trees.
$max-nesting-depth: 20 !default;

@for $current-level from 1 through $max-nesting-depth {

  [aria-level="#{$current-level}"] > .slds-tree__item {
    padding-left: ($spacing-medium * $current-level);
  }
}

/**
* @summary The label text of a tree item or tree branch
* @selector .slds-tree__item-label
* @restrict .slds-tree__item span
*/
.slds-tree__item-label {
  display: block;
}

/**
* @summary The meta text or secondary text of a tree item
* @selector .slds-tree__item-meta
* @restrict .slds-tree__item span
*/
.slds-tree__item-meta {
  display: block;
  color: $color-text-weak;
}

.slds-tree__item .slds-button {
  align-self: flex-start;
  margin-top: $spacing-xxx-small;
}

.slds-tree__item .slds-pill {
  margin-left: $spacing-small;
}

/**
 * @summary Initializes a slds tree group header
 * @selector .slds-tree__group-header
 * @restrict .slds-tree_container h4
 */
.slds-tree__group-header {
  @include text-title;
}