@import '~@alifd/next/lib/core/style/_global';
@import '~@alifd/next/lib/core/style/_motion';
@import '~@alifd/next/lib/tree/scss/variable';
@import '~@alifd/next/lib/tree/scss/mixin';
@import './variables.scss';

// next-checkbox-wrapper
#{$tree-prefix} {
  &-node {
    .#{$css-prefix}checkbox-wrapper {
      margin-left: $s-1;
    }
  }

  &.#{$css-prefix}node-indent {
    .#{$css-prefix}tree-node .#{$css-prefix}checkbox-wrapper {
      margin-left: $s-2;
    }
  }

  &.#{$css-prefix}node-block #{$tree-prefix}-node-inner {
    padding-top: $b-design-tree-node-padding;
    padding-bottom: $b-design-tree-node-padding;

    &:not(.#{$css-prefix}disabled):hover {
      .#{$css-prefix}checkbox-wrapper:not(.disabled)
        .#{$css-prefix}checkbox-inner {
        border-color: $b-design-tree-hover-color;
        color: $b-design-tree-hover-color;

        #{$tree-prefix}-node-label {
          color: $b-design-tree-hover-color;
        }
      }

      #{$tree-prefix}-node-label-wrapper:not(.#{$css-prefix}disabled)
        #{$tree-prefix}-node-label {
        color: $b-design-tree-hover-color;
      }
    }
  }

  &.#{$css-prefix}node-indent #{$tree-prefix}-node-inner {
    &:hover {
      #{$tree-prefix}-switcher.#{$css-prefix}line {
        border-color: $b-design-tree-hover-color;
        background-color: $color-fill1-2;

        #{$tree-prefix}-switcher-icon {
          color: $b-design-tree-hover-color;
        }
      }

      #{$tree-prefix}-node-label {
        color: $b-design-tree-hover-color;
      }

      .#{$css-prefix}checkbox-wrapper:not(.disabled)
        .#{$css-prefix}checkbox-inner {
        border-color: $b-design-tree-hover-color;
        color: $b-design-tree-hover-color;
      }
    }
  }

  &.#{$css-prefix}node-block {
    &.#{$css-prefix}small {
      #{$tree-prefix}-node-inner {
        padding-top: $b-design-tree-small-node-padding;
        padding-bottom: $b-design-tree-small-node-padding;
      }
    }
  }

  &.#{$css-prefix}node-indent {
    &.#{$css-prefix}small {
      #{$tree-prefix}-node-inner {
        padding-top: calc(#{$b-design-tree-small-node-padding} / 2);
        padding-bottom: calc(#{$b-design-tree-small-node-padding} / 2);
      }
    }
  }

  &-right-angle {
    border-bottom-left-radius: $s-1;
  }

  &-node-indent-unit.#{$css-prefix}line::before {
    top: -4px;
  }

  //showline线条位置问题
  &-node-indent-unit {
    width: $b-design-tree-child-indent;

    &.#{$css-prefix}line::before {
      left: calc((#{$tree-switch-size} - #{$tree-line-width}) / 2 - 1px);
    }
  }

  &.#{$css-prefix}small &-node-indent-unit {
    &.#{$css-prefix}line::before {
      height: calc(
        #{$tree-node-title-height} + #{$b-design-tree-small-node-padding} * 2
      );
    }
  }

  &.#{$css-prefix}node-indent {
    #{$tree-prefix}-node #{$tree-prefix}-node {
      margin-left: $b-design-tree-child-indent;
    }

    .#{$css-prefix}tree-node-inner {
      .#{$css-prefix}tree-switcher.#{$css-prefix}noop-line {
        margin-left: -5px;
        width: 16px;

        .#{$css-prefix}tree-right-angle {
          left: -11px;
        }
      }

      // .#{$css-prefix}tree-switcher.#{$css-prefix}noop-line-noroot {
      //   border-bottom: 0px;
      // }
    }
  }

  &-right-angle {
    width: $b-design-tree-child-right-angle-width;
    left: $b-design-tree-child-right-angle-left;
    height: calc(
      #{$tree-node-title-height} + #{$tree-node-padding} - #{$tree-line-width} *
        2 - 4px
    );
  }

  &.#{$css-prefix}small #{$tree-prefix}-right-angle {
    height: calc(
      #{$tree-node-title-height} + #{$b-design-tree-small-node-padding} - #{$tree-line-width} *
        2 - 4px
    );
  }

  &.#{$css-prefix}show-line &-node &-node:not(:last-child) {
    margin-left: $b-design-tree-child-indent-left;
    padding-left: $b-design-tree-child-indent-right;
  }
}

//文档内容树形结构
#{$tree-prefix}.#{$css-prefix}document {
  border-left: 2px $color-fill1-3 solid;
  position: relative;
  width: 214px;

  #{$tree-prefix}-node-inner {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: $b-design-tree-text-node-inner-padding-bottom;

    // &:not(.#{$css-prefix}disabled):hover,
    &.#{$css-prefix}selected,
    &[aria-checked='true'][aria-expanded='false'] {
      &:before {
        content: '';
        width: 2px;
        height: $b-design-tree-text-node-inner-height;
        background-color: $b-design-tree-hover-color;
        position: absolute;
        left: -2px;
      }

      color: $b-design-tree-hover-color;
    }

    #{$tree-prefix}-node-label {
      height: $b-design-tree-text-node-inner-height;
      line-height: $b-design-tree-text-node-inner-height;
    }
  }

  #{$tree-prefix}-switcher.#{$css-prefix}noline {
    position: absolute;
    right: 0;

    .#{$css-prefix}tree-fold-icon::before {
      content: $b-design-tree-text-node-inner-icon;
    }

    &.#{$css-prefix}close {
      .#{$css-prefix}tree-switcher-icon {
        transform: rotate(180deg);
      }
    }
  }

  &.#{$css-prefix}small {
    width: 189px;

    #{$tree-prefix}-node-inner {
      margin-bottom: $b-design-tree-text-small-node-inner-padding-bottom;
    }
  }
}