@use '../../../../mx-core/src/base/typography';

.tree-wrapper {
  .tree-node {
    &-wrapper,
    &-group-wrapper {
      box-sizing: border-box;
      width: 100%;
      display: block;
      height: 1px;

      .tree-node-inner-wrapper {
        display: flex;
        align-items: center;
        height: 100%;
      }

      .tree-node-actions-wrapper {
        display: flex;
        align-items: center;
      }
    }

    &-leaf-node-icon {
      margin-right: 8px;
      line-height: initial;
      width: 20px;
      height: 20px;
    }

    &-actions-wrapper {
      margin-left: 5px;
      display: none;
    }

    &-label-wrapper {
      display: flex;
      align-items: center;
    }
  }
}

.tree-wrapper.selection {
  .tree-node {
    &-label-wrapper {
      &:hover {
        cursor: pointer;
      }
    }
  }
}

.tree-wrapper.highlight {
  .tree-node {
    &-wrapper,
    &-group-wrapper {
      .tree-node-actions-wrapper {
        display: none;
      }
      &:hover {
        cursor: pointer;
        .tree-node-actions-wrapper {
          display: flex;
        }
      }
    }
  }
}

.tree-wrapper.selection.highlight {
  .tree-node {
    &-wrapper,
    &-group-wrapper {
      &:hover {
        cursor: pointer;
      }
    }
  }
}