:root {
  --base-padding: 8px;
  --base-margin: 8px;
  --base-radius: 4px;
  --base-icon-radius: 4px;
  --ik-bg-color-page: #f2f3f5;
  --ik-bg-color-overlay: #fff;
  --ik-text-color-primary: #303133;
  --ik-text-color-regular: #606266;
  --ik-text-color-secondary: #909399;
  --ik-text-color-placeholder: #a8abb2;
  --ik-text-color-disabled: #c0c4cc;
  --ik-fill-color: #f0f2f5;
  --ik-color-white: #fff;
  --ik-color-primary: #409eff;
  --bar-height: 50px;
  --theme-primary: #1890ff;
  --theme-danger: #f56c6c;
  --node-root: #576a95;
  --node-condition: #15bca3;
  --node-cc: #3296fa;
  --node-concurrent: #718dff;
  --node-approval: #ff943e;
  --node-delay: #f25643;
  --node-trigger: #47bc82;
  --node-width: 240px;
  --content-width: 600px;
}

.iflow-content-main {
  width: var(--content-width);
}

.iflow-tabs {
  height: 100%;

  --el-tabs-header-height: 55px;

  .el-tab-pane > .el-card {
    border: none;

    & > .el-card__header {
      border-bottom: none;
    }

    .el-card__body {
      height: calc(100% - 63px);
      padding: 12px var(--el-card-padding);
      overflow: auto;

      .el-card {
        &__body {
          padding: var(--el-card-padding);
        }
      }
    }
  }

  .left-title-icon {
    padding: var(--base-padding);
    margin-left: calc(var(--base-margin) * 2);
    font-size: 16px;
    color: #fff;
    background: #f90;
    border-radius: var(--base-icon-radius);
  }
}

// over tailwind.css
svg {
  display: inline-block;
}

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

// 流程配置
.node-body {
  transition: all 0.25s;

  .ik-guanbi:hover {
    color: var(--theme-danger);
  }
}

.flow-draw-desc {
  margin-bottom: 8px;
  font-size: small;
  line-height: 25px;
  color: #8c8c8c;

  b {
    color: #5c5f64;
  }
}

.ik-flow-config-label {
  font-weight: 600;

  .info {
    font-size: 12px;
    font-weight: 500;
    color: var(--el-text-color-secondary);
  }
}

.node-icon {
  margin-right: 8px;
  color: #fff;
}

.form-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 16px;
  background-color: #000;
  border-radius: 4px;

  i {
    font-size: 27px;
    color: #fff;
  }
}