$name: 'ivue-tree';

:root {
  --#{$name}-color: var(--ivxue-text-color);
  --#{$name}-node-radius: var(--ivue-border-radius);
  --#{$name}-node-hover: var(--ivue-background-color-select-hover);
  --#{$name}-highlight-current: rgba(91, 142, 255, 0.3);
}

.#{$name} {
  position: relative;
  color: var(--#{$name}-color);
  font-size: var(--ivue-font-base-size);

  // 没有数据
  &-no-data {
    position: relative;
    min-height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: var(--ivue-disabled-color);
  }

  // 拖动下划线
  &-drop-indicator {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--ivue-primary-color);
  }

  // 高亮当前选中节点
  &-highlight-current .#{$name}-node.is-current > .#{$name}-node--content {
    background-color: var(--#{$name}-highlight-current);
  }

  // 节点
  &-node {
    white-space: nowrap;
    outline: none;

    &:focus > &--content {
      background-color: var(--#{$name}-node-hover);
    }

    // 拖动
    &.is-drop-inner > &--content .#{$name}-node--label {
      color: var(--ivue-white-color);
      background-color: var(--ivue-primary-color);
      border-radius: var(--#{$name}-node-radius);
    }

    // 内容
    &--content {
      display: flex;
      align-items: center;
      height: 26px;
      cursor: pointer;
      transition: var(--ivue-all-transition);
      border-radius: var(--#{$name}-node-radius);

      &:hover {
        background-color: var(--#{$name}-node-hover);
      }
    }

    // 展开图标
    &--expand-icon {
      margin: 0;
      transition: var(--ivue-all-transition);
    }

    // 展开图标
    &--expand-icon.expanded {
      transform: rotate(90deg);
    }

    // 叶子
    &--expand-icon.is-leaf {
      opacity: 0;
    }

    &--checkbox {
      margin-right: 0;

      .ivue-checkbox {
        display: flex;
      }

      .ivue-checkbox-label-text {
        display: none;
      }
    }

    // 标题文案
    &--label {
      font-size: var(--ivue-font-base-size);
      transition: var(--ivue-all-transition);
    }

    // 子节点
    &--children {
      display: block;
    }

    // loading
    &--loading {
      display: inline-flex;
      width: 15px;
      height: 15px;
      animation: loading-rotate 2s linear infinite;

      &__wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
      }

      .path {
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        stroke-width: 3;
        stroke: var(--ivue-arrow-color);
        stroke-linecap: round;
      }
    }

    // 滚动
    @keyframes loading-rotate {
      100% {
        transform: rotate(360deg);
      }
    }
  }
}