/*! rtl:begin:ignore */
@import '../../style/themes/index';
@import './mixin.less';

@tree-prefix-cls: ~'@{kd-prefix}-tree';
@tree-node-prefix-cls: ~'@{kd-prefix}-tree-node';
.@{tree-prefix-cls} {
  position: relative;
  overflow: auto;
  height: inherit;
  display: flex;
  flex-grow: 1;
  font-size: @tree-font-size;
  color: @tree-color-text;
  margin-left: @tree-margin-left;
  padding: @tree-padding-vertical 0;
  max-width: @tree-root-max-width;
  min-width: @tree-root-min-width;
  &-root {
    min-width: 100%;
    flex-shrink: 0;
  }

  &-show-line {
    .@{tree-node-prefix-cls}-indent {
      position: relative;
      &::before {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 1px;
        border-left: 1px solid #d9d9d9;
        content: '';
        box-sizing: border-box;
        top: 0;
        bottom: 0;
      }

      &-active::before {
        border-color: @tree-color-theme;
      }
    }
  }
}

.@{tree-node-prefix-cls} {
  &-root {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .@{kd-prefix}-spin-dot-spin {
      border: 2px solid transparent;
      width: @tree-expand-icon-loading-width;
      height: @tree-expand-icon-loading-height;

      .@{kd-prefix}-spin-dot-item {
        width: @tree-expand-icon-loading-width;
        height: @tree-expand-icon-loading-height;
      }
    }
  }
  &-fb-children-pointerEvents * {
    pointer-events: none;
  }
  &-item {
    display: flex;
    align-items: center;

    .node-hover();
  }

  &-indent {
    display: flex;
    width: @tree-expand-icon-width;
    margin-right: 6px;

    height: 100%;
    cursor: default;
    flex-shrink: 0;
  }

  &-icon {
    cursor: pointer;
    height: @tree-expand-icon-height;
    width: @tree-expand-icon-width;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: @tree-node-icon-size;
    color: @tree-node-icon-color-text;

    &-hover:hover {
      background-color: @tree-node-hover-bg-color;
      cursor: pointer;
    }
  }
  &-icon-hidden {
    height: @tree-node-icon-height;
    width: @tree-node-icon-width;
    flex-shrink: 0;
    opacity: 0;
    cursor: default;
  }
  &-animation-expand {
    transform: rotate(90deg);
    transition: transform @tree-transition-duration;
  }
  &-animation-collapse {
    transform: rotate(0deg);
    transition: transform @tree-transition-duration;
  }
  &-disabled {
    cursor: not-allowed !important;
    border-color: @tree-node-disabled-border-color;
  }
  &-title-disabled {
    color: @tree-node-disabled-color;
  }
  &-title-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 4px;

    .node-hover();

    &-selected {
      .node-selected();
    }

    .@{kd-prefix}-checkbox-default-disabled {
      .@{kd-prefix}-checkbox-default-indeterminate::before {
        background-color: @tree-node-disabled-color;
      }
    }
  }
  &-title {
    white-space: nowrap;
  }
  &-selected {
    .node-selected();
  }

  &-draggabled {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;

    &.@{tree-node-prefix-cls}-dragging {
      .@{tree-node-prefix-cls}-indent::before {
        border-color: transparent;
      }
    }
  }

  &-drag-over {
    background-color: @tree-node-drag-over-color-background;
    box-shadow: inset 0 0 0 2px @tree-node-drag-over-border-color;
  }

  &-drag-line {
    &-top,
    &-bottom {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      border-top: 2px solid @tree-node-drag-line-border-color;

      &::before {
        content: '';
        width: 4px;
        height: 4px;
        background-color: #fff;
        border-radius: 50%;
        border: 2px solid @tree-node-drag-line-border-color;
        position: absolute;
        top: -1px;
        transform: translateY(-50%);
      }
    }
    &-top {
      top: 0;
    }

    &-bottom {
      top: 100%;
    }
  }
  &-leaf-icon {
    height: @tree-node-icon-height;
    width: @tree-node-icon-width;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.@{tree-prefix-cls}-rtl {
  direction: rtl;
  .@{tree-prefix-cls}-root {
    .@{tree-node-prefix-cls}-item {
      .@{tree-node-prefix-cls}-root {
        .@{tree-node-prefix-cls}-indent {
          margin-right: 0;
          margin-left: 6px;
        }
        .@{tree-node-prefix-cls}-title-wrap {
          padding-right: 4px;
          padding-left: 0;
          .@{kd-prefix}-checkbox {
            &-default-margin {
              margin-right: 0;
              margin-left: 4px;
            }
          }
        }
        .@{tree-node-prefix-cls}-animation-expand {
          transform: rotate(-90deg);
        }
      }
    }
  }
}
/*! rtl:end:ignore */