@import '../../../style/global-parameters.scss';
@import '../../../style/mixin.scss';

.default-tree {
  position: relative;
  height: 100%;

  &.default-tree-table {
    .ant-tree .ant-tree-treenode {
      padding: 0;
      margin-bottom: 4px;
      border-radius: 4px;
    }
  }

  .oio-tree-wrapper {
    @include oio-scrollbar();

    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;

    & > .ant-spin-container {
      height: 100%;

      & > .oio-tree > li:first-child {
        padding-top: 0;
      }
    }

    .oio-tree {
      .default-tree-load-more-node {
        .ant-tree-node-content-wrapper {
          cursor: default;

          &:hover {
            background-color: transparent;
          }
        }
      }

      .default-tree-select-all-node {
        color: var(--oio-text-color);
        font-weight: var(--oio-font-weight-bold);

        .ant-tree-switcher {
          display: none;
        }
      }

      &.ant-tree .ant-tree-node-content-wrapper:hover {
        background-color: transparent;
      }

      .ant-tree-treenode:hover {
        background-color: var(--oio-menu-hover-background-color);
        .ant-tree-node-content-wrapper {
          color: var(--oio-primary-color);
        }
      }
    }

    .default-tree-node-wrapper {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;

      .default-tree-node-title {
        flex-grow: 1;
        flex-shrink: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .default-tree-node-row-actions {
        max-width: 80%;
        flex-grow: 0;
        flex-shrink: 0;

        .action-bar {
          height: 22px;
        }
      }
    }
  }

  &.default-tree-content-wrapper {
    display: flex;
    column-gap: 24px;

    .oio-tree-wrapper {
      position: relative;
    }

    .default-tree-content {
      flex: 1;
    }
  }

  &.default-tree-tree {
    & > .default-search-tree-wrapper,
    & > .default-tree-wrapper,
    & > .default-tree-content {
      padding: var(--oio-padding);
      border: var($parameterPrefix + -border-width) var($parameterPrefix + -border-style)
        var($parameterPrefix + -border-color);
      border-radius: var($parameterPrefix + -border-radius, 4px);
      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.05);
    }
  }
  .ant-tree-iconEle {
    margin-left: -8px;
    width: 18px;
    .default-tree-icon {
      line-height: 24px;
      vertical-align: top;
      img {
        vertical-align: -0.0875em;
      }
    }
  }
}

.default-search-tree-wrapper {
  height: 100%;
  position: relative;

  .ant-input-affix-wrapper {
    border-color: var(--oio-border-color);
  }

  .default-search-tree-input {
    position: relative;
  }

  .oio-tree-wrapper {
    height: calc(100% - var(#{$parameterPrefix + -height}) - 4px);
  }

  .oio-tree {
    padding-top: var(--oio-padding);
  }
}