@use 'tree/index.scss';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use 'common/transition';

@include b(tree) {
  @include set-component-css-var('tree', $tree);
}

@include b(tree) {
  position: relative;
  cursor: default;
  background: var(--sg-color-white);
  color: var(--sg-tree-text-color);

  @include e(search) {
    margin: 0 0 8px;
    width: 100%;

    & + .sg-tree__scrollbar {
      height: calc(100% - 40px);
    }
  }

  @include e(empty-block) {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--sg-text-color-secondary);
    font-size: var(--sg-font-size-base);
  }

  // @include e(empty-block) {
  //   position: relative;
  //   min-height: 60px;
  //   text-align: center;
  //   width: 100%;
  //   height: 100%;
  // }

  // @include e(empty-text) {
  //   position: absolute;
  //   left: 50%;
  //   top: 50%;
  //   transform: translate(-50%, -50%);
  //   color: var(--sg-text-color-secondary);
  //   font-size: var(--sg-font-size-base);
  // }

  // @include e(drop-indicator) {
  //   position: absolute;
  //   left: 0;
  //   right: 0;
  //   height: 1px;
  //   background-color: var(--sg-color-primary);
  // }
}

// @include b(tree-node) {
//   white-space: nowrap;
//   outline: none;

//   @include when(drop-inner) {
//     > .#{$namespace}-tree-node__content .#{$namespace}-tree-node__label {
//       background-color: var(--sg-color-primary);
//       color: #fff;
//     }
//   }

//   @include e(content) {
//     display: flex;
//     align-items: center;
//     height: 26px;
//     cursor: pointer;

//     & > .#{$namespace}-tree-node__expand-icon {
//       padding: 6px;
//       box-sizing: content-box;
//     }
//     & > label.#{$namespace}-checkbox {
//       margin-right: 8px;
//     }
//     &:hover {
//       background-color: var(--sg-tree-node-hover-bg-color);
//     }

//     .#{$namespace}-tree.is-dragging & {
//       cursor: move;

//       & * {
//         pointer-events: none;
//       }
//     }

//     .#{$namespace}-tree.is-dragging.is-drop-not-allow & {
//       cursor: not-allowed;
//     }
//   }

//   @include e(expand-icon) {
//     cursor: pointer;
//     color: var(--sg-tree-expand-icon-color);
//     font-size: 12px;

//     transform: rotate(0deg);
//     transition: transform var(--sg-transition-duration) ease-in-out;

//     &.expanded {
//       transform: rotate(90deg);
//     }

//     &.is-leaf {
//       color: transparent;
//       cursor: default;
//     }
//     &.is-hidden {
//       visibility: hidden;
//     }
//   }

//   @include e(label) {
//     font-size: var(--sg-font-size-base);
//   }

//   @include e(loading-icon) {
//     margin-right: 8px;
//     font-size: var(--sg-font-size-base);
//     color: var(--sg-tree-expand-icon-color);
//   }

//   & > .#{$namespace}-tree-node__children {
//     overflow: hidden;
//     background-color: transparent;
//   }

//   &.is-expanded > .#{$namespace}-tree-node__children {
//     display: block;
//   }
// }

// .#{$namespace}-tree--highlight-current
//   .#{$namespace}-tree-node.is-current
//   > .#{$namespace}-tree-node__content {
//   background-color: var(--sg-color-primary-light-9);
// }