@import '~antd/es/style/themes/default.less';

.node() {
  grid-gap: 5px;
  background: #fff;
  cursor: grab;
}

.flowchart-extension-container {
  @light-border: ~'1px solid #d9d9d9';
  @header-bg: #fff;
  @dnd-panel-prefix-cls: ~'xflow-node-panel';
  @dnd-panel-prefix-container: ~'xflow-node-panel-collpase';

  .@{dnd-panel-prefix-cls} {
    color: rgba(0, 0, 0, 0.85);
    font-size: 12px;

    &-header {
      display: flex;
      justify-content: space-evenly;
      background: @header-bg;
      border-right: @light-border;
      border-bottom: @light-border;

      &-title {
        font-size: 16px;
      }
      &-search {
        width: 100%;
        padding: 0 12px;
      }
    }

    &-custom {
      display: flex;
      flex-wrap: wrap;
      .node();
    }

    &-official {
      .node();

      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(24px, 1fr));
    }

    &-node-wrapper {
      display: flex;
      justify-content: center;
      cursor: pointer;
    }
    .ant-collapse-content-box {
      padding: 12px;
    }
    .ant-collapse-content {
      border-top: none;
    }
    .ant-collapse-header {
      color: rgba(0, 0, 0, 0.85);
      font-size: 12px;
    }
  }

  .@{dnd-panel-prefix-container} {
    color: rgba(0, 0, 0, 0.85);
    font-size: 12px;
    transition: left 0.5s;

    &-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
    }

    &-nodes {
      border-right: @light-border;
    }

    &-icon {
      position: absolute;
      z-index: 99;
      width: 20px;
      color: #aaa;
      text-align: center;
      background: #fff;
      border: 1px solid #ccc;
      transform: translate(0, -50%);
      cursor: pointer;

      &:hover {
        color: rgb(43, 132, 192);
      }
    }
  }
}