@import '../style/theme/color';
@import './tree.component';

:host {
  display: block;
}

::ng-deep {
  &.devui-tree-node.devui-operable-tree-node {
    .devui-tree-node__checkbox {
      margin-left: 8px;
      margin-right: 5px;
    }

    .devui-tree-icons {
      margin-left: 8px;
      cursor: pointer;
      display: inherit;

      svg {
        #add-path {
          fill: $devui-icon-fill;
        }

        #edit-path {
          fill: $devui-icon-fill;
        }

        #delete-path {
          fill: $devui-icon-fill;
        }

        path,
        rect {
          fill: $devui-icon-fill;
        }
      }

      &:hover {
        #add-path {
          fill: $devui-icon-fill-hover;
        }

        #edit-path {
          fill: $devui-icon-fill-hover;
        }

        #delete-path {
          fill: $devui-icon-fill-hover;
        }
      }
    }
  }
}

.devui-form-control {
  outline: none;
}

.devui-tree-indicator {
  height: 1px;
  background-color: $devui-brand;
  position: absolute;
}

.devui-drop-inner {
  color: $devui-brand;
  background-color: $devui-blue-5;
}

.toggle-disabled {
  cursor: not-allowed !important;

  svg.svg-icon rect {
    stroke: $devui-disabled-text !important;
  }

  svg.svg-icon.svg-icon-close rect:last-child {
    stroke: none !important;
    fill: $devui-disabled-text !important;
  }

  svg.svg-icon path {
    fill: $devui-disabled-text !important;
  }
}

.select-disabled {
  color: $devui-disabled-text !important;
  cursor: not-allowed !important;
}

.devui-tree-node-highlight {
  color: $devui-brand;
  font-weight: bold;
}

.devui-tree-icons-container {
  display: inline-flex;

  &.align-end {
    margin-left: auto;
  }
}

:host ::ng-deep .devui-tree-node__title d-highlight .devui-match-highlight {
  color: $devui-brand;
  font-weight: bold;
}

::ng-deep .devui-tree-drag-ghost-container {
  position: fixed;
  left: -10000px;
  top: -10000px;
  width: 100%;
  height: auto;
  background: transparent;
}
