@import '../../style/themes/index';
@import '../../style/mixins/index';

@m-tree-directory-prefix-cls: m-tree-directory;

.@{m-tree-directory-prefix-cls} {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: inherit;
  height: inherit;
  overflow-x: hidden;
  overflow-y: auto;

  &-container {
    width: 100%;
  }
  .ant-tree {
    width: 100%;
    margin-top: @tree-directory-ant-tree-marin-top;
    background: inherit;
    .ant-tree-treenode {
      display: flex;
      height: @tree-directory-ant-tree-treenode-height;
      padding: @tree-directory-ant-tree-treenode-padding;
      font-size: @tree-directory-ant-tree-treenode-font-size;
    }

    .ant-tree-indent-unit {
      width: @tree-directory-ant-tree-indent-unit-width;
    }

    .ant-tree-switcher {
      width: 12px;
    }

    .ant-tree-node-content-wrapper {
      display: flex;
      flex: 1;
      width: 0;

      & > p {
        padding-right: 4px;
      }

      .@{m-tree-directory-prefix-cls} {
        &-title {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        &-num-block,
        &-num {
          display: flex;
          align-items: center;
          margin-left: 4px;
        }

        &-num p {
          padding: 0;
          margin: 0;
        }
      }

      &.ant-tree-node-selected {
        background-color: unset;
      }

      &:hover {
        background: unset;
      }
    }

    .ant-tree-treenode:hover {
      background: @tree-directory-ant-tree-treenode-hover;
    }
  }

  &-content {
    display: flex;
  }

  m-search-input {
    width: 100%;
    margin-left: 20px;
  }
}