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

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

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

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

    &-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);
      }
    }

    .xflow-workspace-panel {
      transition: left 0.5s;
    }
  }
}