@use 'bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css';

// 边框被 token-simulation 样式覆盖了
.djs-palette {
  background: var(--palette-background-color);
  border: solid 1px var(--palette-border-color) !important;
  border-radius: 2px;
}

.my-process-designer {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .my-process-designer__header {
    width: 100%;
    min-height: 36px;

    .el-button {
      text-align: center;
    }

    .el-button-group {
      margin: 4px;
    }

    .el-tooltip__popper {
      .el-button {
        width: 100%;
        padding-right: 8px;
        padding-left: 8px;
        text-align: left;
      }

      .el-button:hover {
        color: #fff;
        background: rgb(64 158 255 / 80%);
      }
    }

    .align {
      position: relative;

      i {
        &::after {
          position: absolute;
          content: '|';
          // transform: rotate(90deg) translate(200%, 60%);
          transform: rotate(180deg) translate(271%, -10%);
        }
      }
    }

    .align.align-left i {
      transform: rotate(90deg);
    }

    .align.align-right i {
      transform: rotate(-90deg);
    }

    .align.align-top i {
      transform: rotate(180deg);
    }

    .align.align-bottom i {
      transform: rotate(0deg);
    }

    .align.align-center i {
      transform: rotate(0deg);

      &::after {
        // transform: rotate(90deg) translate(0, 60%);
        transform: rotate(0deg) translate(-0%, -5%);
      }
    }

    .align.align-middle i {
      transform: rotate(-90deg);

      &::after {
        // transform: rotate(90deg) translate(0, 60%);
        transform: rotate(0deg) translate(0, -10%);
      }
    }
  }

  .my-process-designer__container {
    display: inline-flex;
    flex: 1;
    width: 100%;

    .my-process-designer__canvas {
      position: relative;
      flex: 1;
      height: 100%;
      background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+')
        repeat !important;

      div.toggle-mode {
        display: none;
      }
    }

    .my-process-designer__property-panel {
      z-index: 10;
      height: 100%;
      overflow: scroll;
      overflow-y: auto;

      * {
        box-sizing: border-box;
      }
    }
    // svg {
    //   width: 100%;
    //   height: 100%;
    //   min-height: 100%;
    //   overflow: hidden;
    // }
  }
}

//侧边栏配置
// .djs-palette .two-column .open {
.open {
  // .djs-palette.open {
  .djs-palette-entries {
    div[class^='bpmn-icon-']::before,
    div[class*='bpmn-icon-']::before {
      line-height: unset;
    }

    div.entry {
      position: relative;
    }

    div.entry:hover {
      &::after {
        position: absolute;
        top: 0;
        right: -10px;
        bottom: 0;
        z-index: 100;
        box-sizing: border-box;
        display: inline-block;
        width: max-content;
        padding: 0 16px;
        overflow: hidden;
        font-size: 0.5em;
        font-variant: normal;
        vertical-align: text-bottom;
        text-transform: none;
        text-decoration: inherit;
        content: attr(title);
        background: #fafafa;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 0 0 6px #eee;
        transform: translateX(100%);
      }
    }
  }
}

pre {
  height: 100%;
  max-height: calc(80vh - 32px);
  margin: 0;
  overflow: hidden;
  overflow-y: auto;
}

.hljs {
  word-break: break-word;
  white-space: pre-wrap;
}

.hljs * {
  font-family: Consolas, Monaco, monospace;
}