// Lightning Design System 2.29.1
// 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: var(--slds-c-tree-sizing-max-width, var(--sds-c-tree-sizing-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: var(--slds-g-color-neutral-base-95, #{$color-background-row-hover});
  cursor: pointer;
}

/**
 * @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: var(--slds-g-color-neutral-base-95, #{$color-background-row-hover});
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--slds-g-shadow-inset-focus-1, #{$shadow-button-focus});
  }
}

.slds-tree [role="treeitem"][aria-selected="true"]:focus {
  > .slds-tree__item {
    box-shadow: $brand-primary 4px 0 0 inset,
      0 0 0 2px var(--slds-g-color-neutral-base-100, #{$palette-neutral-100}),
      0 0 0 4px var(--slds-g-color-brand-base-40, #{$palette-blue-40});
  }
}

.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 [aria-disabled="true"] {
  color: var(--slds-g-color-neutral-base-80, #{$color-text-button-default-disabled});

  .slds-tree__item.slds-is-hovered,
  .slds-tree__item:hover {
    background-color: transparent;
    cursor: default;
  }

  .slds-tree__item-meta {
    color: inherit;
  }
}

.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: var(--slds-g-color-neutral-base-30, #{$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;
}