@import "../../scss/_bootstrap-extended/include";
@import "jstree/dist/themes/default/style";
@import "jstree/dist/themes/default-dark/style";
@import "./themes/theme";

$jstree-icon-size: $icon-size;
$jstree-bg-amoumnt: 15%;
$jstree-mix-bg: var(--#{$prefix}white);

.jstree {
  --#{$prefix}jstree-bg-amount: #{$jstree-bg-amoumnt};
  --#{$prefix}jstree-mix-bg: #{$jstree-mix-bg};
  .jstree-container-ul {
    .jstree-anchor {
      color: var(--#{$prefix}body-color);
    }
  }
  &.jstree-default,
  &.jstree-default-dark {
    .jstree-icon:not(.jstree-ocl):not(.jstree-checkbox) {
      block-size: $jstree-icon-size;
      inline-size: $jstree-icon-size;
      vertical-align: middle;
    }
    .jstree-themeicon-custom {
      background: var(--#{$prefix}warning);
    }
    .jstree-hovered,
    .jstree-wholerow-hovered {
      background: var(--#{$prefix}primary-bg-subtle);
      box-shadow: none;
      color: var(--#{$prefix}primary);
    }
    .jstree-clicked,
    .jstree-wholerow-clicked {
      background: var(--#{$prefix}primary);
      color: var(--#{$prefix}white);
    }

    & > .jstree-no-dots{
      .jstree-node,
      .jstree-leaf > .jstree-ocl {
        background: transparent;
      }
    }
  }
  &.jstree-default .jstree-icon.jstree-checkbox {
    background-image: url("data:image/png;base64,[encoded data, 4996 characters]");
    margin-block-start: .1875rem;
  }
  &.jstree-default-dark {
    --#{$prefix}jstree-bg-amount: 45%;
    --#{$prefix}jstree-mix-bg: var(--#{$prefix}dark);
    background: var(--#{$prefix}paper-bg);
    .jstree-anchor {
      text-shadow: none;
    }
  }
}
