////////树////////
.d-tree {
  .d-tree-group {
    margin: 0;
    padding: 0;
    list-style: none outside none;
    .sys-pseudo-clear();
  }
  .d-tree-item {
    list-style: none outside none;
  }
  // 子级缩进
  &:not(.d-list-cascade) {
    .d-tree-item {
      & > .d-tree-group > .d-tree-item {
        & > .d-tree-item-row {
          padding-left: @sys-layout-md * 2;
        }
        & > .d-tree-group > .d-tree-item {
          & > .d-tree-item-row {
            padding-left: @sys-layout-md * 3;
          }
          & > .d-tree-group > .d-tree-item {
            & > .d-tree-item-row {
              padding-left: @sys-layout-md * 4;
            }
            & > .d-tree-group > .d-tree-item {
              & > .d-tree-item-row {
                padding-left: @sys-layout-md * 5;
              }
            }
          }
        }
      }
    }
  }
  .d-tree-caption,.d-tree-item-row {
    display: flex;
    align-items: center;
    padding-right: @sys-layout-md;
    height: @sys-height-sm;
    line-height: @sys-height-sm;
    color: @sys-color-gray;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
  }
  .d-tree-item-row {
    padding-left: @sys-layout-md;
    transition-duration: @sys-duration-sm;
    &:hover,&.active {
      background: @sys-color-shadow;
    }
    &.active {
      .d-caret-right {
        transform: rotate(90deg);
      }
      & + .d-tree-group {
        display: block;
      }
    }
    & + .d-tree-group {
      display: none;
    }
    .d-tree-item-text {
      flex: 1;
      transition-duration: @sys-duration-sm;
      & ~ .d-arrow-icon,
      & ~ .d-tree-item-icon {
        margin: 0 0 0 @sys-layout-sm;
      }
    }
    .d-tree-item-icon {
      & + .d-tree-item-text,
      & + .d-tree-row-cell {
        padding-left: @sys-layout-sm;
      }
    }
    .d-tree-row-cell {
      & + .d-tree-item-text,
      & + .d-tree-row-cell {
        padding-left: @sys-layout-sm;
      }
    }
    .d-caret-right {
      cursor: pointer;
      transition-duration: 0.3s;
    }
  }
  .d-tree-caption {
    padding-left: @sys-layout-md;
    font-size: 12px;
    line-height: 1.42857143;
    color: #999;
  }
  .d-tree-split {
    overflow: hidden;
    margin: 2px 0;
    height: 1px;
    background-color: @sys-color-muted;
  }
  & > .d-tree-group {
    & > .d-tree-item {
      & > .d-tree-item-row {
        &.active {
          background: darken(@sys-color-shadow, 5%);
        }
      }
      & > .d-tree-item {
        & > .d-tree-item-row {
          &.active {
            color: #ccc;
          }
        }
      }
    }
  }
}

// 边框
.d-tree-border {
  border: 1px solid @color-border;
  border-radius: 4px;
}

////尺寸////
.d-tree-md {
  .d-tree-caption,.d-tree-item-row {
    height: @sys-height-md;
    line-height: @sys-height-md;
  }
}
.d-tree-lg {
  .d-tree-caption,.d-tree-item-row {
    height: @sys-height-lg;
    line-height: @sys-height-lg;
  }
}

////主题////
.d-tree-black {
  @color-nav: @sys-color-blackgray;
  background: @color-nav;
  .d-tree-caption,.d-tree-item-row {
    color: @sys-color-muted;
    background: @color-nav;
    & > .d-tree-item-text {
      color: @sys-color-muted;
    }
  }
  .d-tree-item-row {
    &:hover,&.active:hover {
      background: darken(@color-nav, 5%);
    }
    &.active {
      background: @color-nav;
      & > .d-tree-item-text {
        color: @color-theme;
      }
    }
  }
  & > .d-tree-group {
    & > .d-tree-item {
      & > .d-tree-item-row {
        &.active {
          background: @color-nav;
        }
        &.active:hover {
          background: darken(@color-nav, 5%);
        }
      }
      & > .d-tree-item {
        & > .d-tree-item-row {
          &.active {
            & > .d-tree-item-text {
              color: @color-theme;
            }
          }
        }
      }
    }
  }
}
.d-tree-default {
  @color-nav: @color-highlight;
  .d-tree-caption,.d-tree-item-row {
    // color: @sys-color-muted;
    // background: @color-nav;
    & > .d-tree-item-text {
      // color: @sys-color-muted;
    }
  }
  .d-tree-item-row {
    &:hover,&.active:hover {
      background: darken(@color-nav, 5%);
    }
    &.active {
      background: @color-nav;
      & > .d-tree-item-text {
        color: @color-theme;
      }
    }
  }
  & > .d-tree-group {
    & > .d-tree-item {
      & > .d-tree-item-row {
        &.active {
          background: @color-nav;
        }
        &.active:hover {
          background: darken(@color-nav, 5%);
        }
      }
      & > .d-tree-item {
        & > .d-tree-item-row {
          &.active {
            & > .d-tree-item-text {
              color: @color-theme;
            }
          }
        }
      }
    }
  }
}