// @import '../_utils.scss';
// @import './checkbox.scss';
// @import './icon.scss';

.#{$tree-prefix-cls} {
  @if $--size-switch == yes {
    .#{$checkbox-prefix-cls}-wrapper{
      padding: ($--size-height-base - $--size-line-height-base) / 2 0;
      vertical-align: middle;
    }
  }
  ul {
    list-style: none;
    margin: $tree-ul-margin;
    padding: $tree-ul-padding;
    font-size: $font-size-small;

    li {
      list-style: none;
      margin: $tree-ul-li-margin;
      padding: $tree-ul-li-padding;
      white-space: nowrap;
      outline: none;
      @if $--size-switch == yes {
        margin: 0;
      } 
    }
  }

  li {
    ul {
      margin: $tree-li-margin;
      padding: $tree-li-padding;
    }
  }

  &-title {
    display: inline-block;
    margin: $tree-title-margin;
    padding: $tree-title-padding;
    border-radius: $btn-border-radius-small;
    cursor: pointer;
    vertical-align: $tree-title-vertical-align;
    color: $text-color;
    font-size: $tree-title-font-size;
    transition: all $transition-time $ease-in-out;
    @if $--size-switch == yes {
      font-size: $--size-font-size-base;
      vertical-align: bottom; //需要调整对齐，不然会因为和checkbox之间的错位出现小数点
      @include computed-line-height;
      padding:computed-padding-vertical($--size-height-base, $--size-font-size-base, 0px) 0;
    }
    @include theme-font-color($__tree-title_font-color);

    &:hover {
      background-color: $tree-title-hover-bgcolor;
      color: $tree-title-hover-color;

      @include theme-background-color($__tree-title_hover_background-color);
      @include theme-font-color($__tree-title_hover_font-color);
    }

    &-selected,
    &-selected:hover {
      // background-color: lighten($primary-color, 40%);
      background-color: $tree-title-selected-bgcolor;
      color: $tree-title-selected-color;

      @include theme-background-color($__tree-title_selected_background-color);
      @include theme-font-color($__tree-title_selected_font-color);
    }

    &-filterable {
      color: darken($error-color, 10%);

      @include theme-font-color($__tree-title-filterable_font-color);
    }

    &-focus {
      background-color: $tree-title-focus-bgcolor;
      color: $tree-title-focus-color;

      @include theme-background-color($__tree-title_focus_background-color);
      @include theme-font-color($__tree-title_focus_font-color);
    }

    &-disabled,
    &-disabled:hover {
      color: $tree-title-disabled-color;
      cursor: not-allowed;
      background-color: transparent;

      @include theme-font-color($__tree-title_disabled_font-color);
      @include theme-background-color($__tree-title_disabled_background-color);
    }
    // &-parent {
    //   margin-top: 4px;
    // }
  }

  &-arrow {
    cursor: pointer;
    min-width: $tree-arrow-min-width;
    text-align: center;
    display: inline-block;
    @if $--size-switch == yes {
      @include computed-line-height;
      padding:computed-padding-vertical($--size-height-base, $--size-font-size-base, 0px) 0;
      vertical-align: middle;
    }  
    i {
      font-size: $tree-arrow-i-font-size;
      display: inline-block;
      transition: all $transition-time $ease-in-out;

      @include theme-font-color($__tree-arrow-icon_font-color);
    }

    &-open {
      i {
        transform: rotate(90deg);
      }
    }

    &-hidden {
      cursor: auto;

      i {
        display: none;
      }
    }

    &-disabled {
      cursor: $cursor-disabled;
    }
  }

  &-empty {
    @if $--size-switch == yes {
      font-size: $--size-font-size-base;
      @include computed-line-height;
      padding:computed-padding-vertical($--size-height-base, $--size-font-size-base, 0px) 0;
    } @else {
      padding: $tree-empty-padding;
    }
  }

  &-isBoxRight {
    .#{$checkbox-prefix-cls}-wrapper {
      float: right;
      @if $--size-switch != yes {
        margin-top: $tree-isBoxRight-checkbox-margin-top;
      }
    }
  }
}
.#{$tree-prefix-cls}-item {
  white-space: nowrap;

  span:nth-child(n) {
    span:first-child {
      i {
        @include theme-font-color($__tree-arrow-icon_open_font-color);
      }
    }
  }
}
.#{$tree-prefix-cls}-children {
  .#{$tree-prefix-cls}-item {
    white-space: nowrap;

    span:nth-child(n) {
      span:first-child {
        i {
          @include theme-font-color($__tree-arrow-icon_open_font-color);
        }
      }
    }
  }
}

.#{$tree-prefix-cls}-item:focus {
  outline: none;
}