@import '~antd/es/style/themes/default.less';
@import (reference) '~@antv/xflow-core/es/style/themes/index.less';

@light-border: ~'1px solid #d9d9d9';
@header-bg: #fff;
@body-bg: #fff;

@dnd-panel-prefix-cls: ~'@{xflow-prefix}-node-dnd-panel';

.@{dnd-panel-prefix-cls} {
  border-right: @light-border;

  &-header {
    display: flex;
    justify-content: space-evenly;
    background: @header-bg;
    border-bottom: @light-border;
    &-title {
      font-size: 16px;
    }
    &-search {
      width: 100%;
      padding: 0 12px;
    }
  }

  &-body {
    padding: 0;
    padding: 8px 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: @body-bg;

    .@{ant-prefix}-tree-iconEle.@{ant-prefix}-tree-icon__customize {
      display: none !important;
      width: auto;
      margin-right: 0;
      color: rgba(0, 0, 0, 0.45);
    }

    .@{ant-prefix}-tree {
      background: unset;
    }

    .@{ant-prefix}-tree-switcher {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .@{ant-prefix}-tree-node-content-wrapper {
      display: flex;
      align-items: center;
      padding-left: 0;
      overflow: hidden;
    }
    &-list {
      margin: 0;
      padding: 0;
    }
    &-list-item {
      margin: 0;
      padding: 4px 12px;
      overflow: hidden;
      list-style-type: none;
      .@{dnd-panel-prefix-cls}-node-wrapper {
        justify-content: center;
      }
    }
  }

  &-tree-leaf {
    position: relative;

    .@{ant-prefix}-tree-iconEle {
      display: none;
    }

    .@{ant-prefix}-tree-title {
      padding: 2px;
    }
  }

  &-node-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
  }

  &-footer {
    display: flex;
    justify-content: space-evenly;
    background: @header-bg;
    border-top: @light-border;
    &-title {
      font-size: 16px;
    }
  }
}

.@{xflow-prefix}-dnd-node {
  width: 100%;
  height: 40px;
}