@use "sass:math";
@use "../box.scss" as *;
@use "../../util/scss/add-rules.scss" as *;
@use "../../util/scss/clockwise.scss" as *;
@use "../../util/scss/deep-merge.scss" as *;
@use "../../util/scss/calc.scss" as *;
@use "../../util/scss/besm.scss" as *;
@use "../../util/scss/include.scss" as *;
@use "../variables.scss" as *;
@use "../maps.scss" as *;
@use "sass:map";

@mixin cx-treenode(
   $name: "treenode",
   $icon-size: $cx-default-icon-size,
   $handle-size: $cx-default-input-tool-size,
   $handle-state-style-map: $cx-input-right-icon-state-style-map,
   $besm: $cx-besm
) {
   $block: map.get($besm, block);
   $element: map.get($besm, element);
   $state: map.get($besm, state);
   $mod: map.get($besm, mod);

   .#{$block}#{$name} {
      padding-left: cx-calc($handle-size, cx-multiply($icon-size, 0.25));
      position: relative;

      &.#{$state}icon {
         padding-left: cx-calc(
            $handle-size,
            $icon-size,
            cx-multiply($icon-size, 0.25)
         );
      }

      @for $i from 1 through 20 {
         &.#{$state}level-#{$i} {
            margin-left: #{($i * 20)}px;
         }
      }
   }

   .#{$element}#{$name}-handle {
      position: absolute;

      @include cx-add-state-rules($handle-state-style-map, default);

      left: 0;
      top: 50%;
      margin-top: cx-multiply($handle-size, -0.5);
      bottom: 0;
      width: cx-calc($handle-size, $icon-size);
      height: $handle-size;

      &:hover {
         @include cx-add-state-rules($handle-state-style-map, hover);
      }

      &:active {
         @include cx-add-state-rules($handle-state-style-map, active);
      }
   }

   .#{$element}#{$name}-arrow {
      display: block;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: cx-multiply($icon-size, -0.5);
      margin-left: cx-multiply(
         cx-calc($handle-size, cx-multiply($icon-size, -1)),
         0.5
      );
      height: $icon-size;
      width: $icon-size;
      line-height: $icon-size;
      transform: rotate(-90deg);
      transition: transform 0.2s;

      .#{$state}expanded & {
         transform: rotate(0);
      }
   }

   .#{$element}#{$name}-icon {
      display: block;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: cx-multiply($icon-size, -0.5);
      margin-left: cx-multiply(cx-calc($handle-size, $icon-size), 0.5);
      height: $icon-size;
      width: $icon-size;
      line-height: $icon-size;
   }

   .#{$block}grid.#{$mod}tree {
      td {
         border-top: none;
      }
   }
}

@if (cx-should-include("cx/widgets/TreeNode")) {
   @include cx-treenode();
}