@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-leaf .jstree-anchor > .jstree-themeicon,
  .jstree-themeicon-custom {
    margin-inline-end: .3125rem;
  }
  .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}body-color);
    }
    & > :not(.jstree-wholerow-ul) {
      .jstree-hovered,
      .jstree-clicked {
        background: var(--#{$prefix}primary-bg-subtle);
        box-shadow: none;
      }
    }
    .jstree-wholerow-clicked,
    .jstree-wholerow-hovered {
      background: color-mix(in sRGB, var(--#{$prefix}primary) var(--#{$prefix}jstree-bg-amount), var(--#{$prefix}jstree-mix-bg));
    }
    & > .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;
    }
  }
}
