@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

.sky-angular-tree-wrapper ::ng-deep {
  .angular-tree-component {
    cursor: initial;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none; /* non-prefixed version, currently not supported by any browser */
  }

  // Tree & Nodes
  .node-wrapper {
    display: flex;
    align-items: center;
    padding: 4px $sky-margin-half; // Allows 2px of space for drop-slot, but total 10px between each node.
    border-left: $sky-nav-selected-border-width solid transparent; // Whitespace for active style.
  }

  .node-content-wrapper {
    display: flex;
    align-items: center;
    padding: 0;
    cursor: pointer;
  }

  .tree-children {
    padding-left: 30px;
    overflow: hidden;
  }

  // Toggle indicator
  .sky-toggle-children {
    @include mixins.sky-icon-button-borderless();
    min-height: 19px;
    min-width: 20px;
    margin: 0 $sky-margin 0 0;
    padding: 0;
    line-height: 1;
  }

  .toggle-children-placeholder {
    display: inline-block;
    height: 19px;
    width: 20px;
    margin: 0 $sky-margin 0 0;
  }

  // Selected states
  .sky-angular-tree-node-selected {
    background: $sky-background-color-selected;
  }

  // Active states
  .sky-angular-tree-node-active {
    background-color: $sky-background-color-neutral-light;
    color: $sky-text-color-default;
    border-left: $sky-nav-selected-border-width solid $sky-highlight-color-info;
  }

  // Checkboxes
  sky-checkbox {
    display: inline-flex;
  }

  .sky-switch-control {
    margin: 0 8px 0 0;
  }

  // Context Menus
  .sky-angular-tree-context-menu {
    margin: 0 $sky-margin 0 0;
  }

  // Drag & Drop
  .node-drop-slot {
    display: block;
    height: 2px;
  }
  .node-drop-slot.is-dragging-over {
    height: 20px;
    background: $sky-background-color-neutral-light;
    border: 1px solid $sky-border-color-neutral-light;
  }
}

// Read-only mode
.sky-angular-tree-wrapper.sky-angular-tree-read-only ::ng-deep {
  .node-content-wrapper {
    cursor: initial;
  }
}
