.flow-container {
  $background: #fff;
  $borderColor: #eee;
  overflow-x: auto;

  .flow-main { min-width: min-content;display: flex;flex-direction: column;align-items: center;}

  .flow-group {position: relative;background: $background;min-width: min-content}

  .flow-item {border: 1px solid $borderColor;box-shadow: 0 0 6px rgba(102, 102, 102, 0.1);height: 80px;border-radius: 5px;overflow: hidden;display: flex;flex-direction: column;transition: all .3s;position: relative;z-index: 2;background: $background;width: 180px;

    &:hover {border-color: rgb(85, 197, 192);

      .title .close {visibility: visible;opacity: 1}
    }

    .title {background: rgb(85, 197, 192);color: #fff;display: flex;align-items: center;padding: 3px 10px;justify-content: space-between;

      span {flex: 2}

      .close {transform: scale(.8);visibility: hidden;transition: all .3s;opacity: 0;cursor: pointer}

      i {font-size: 14px;margin-right: 3px}

      &.bg-2 {background: rgb(255, 148, 62)}

      &.bg-5 {background: none;color: #666}

      &.bg-3 {background: rgb(50, 150, 250)}
    }

    .text {flex: 1;display: flex;align-items: center;padding: 5px 15px;cursor: pointer;

      div {display: block;max-height: 38px;overflow: hidden;color: #666;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
    }

    &.status-pass {
      // 通过样式
      border-color: #20b2aa;
    }

    &.status-refuse {
      // 拒绝样式
      border-color: #fc653f;
    }

    &.status-wait {
      // 未处理的样式
      border-color: #909399;
    }

    &.status-active {
      // 当前处理的样式
      border-color: #1890ff;
    }

  }

  .flow-add {padding: 8px 0;position: relative;font-size: 12px;

    i {width: 30px;height: 30px;border-radius: 50%;border: 1px solid #eee;box-shadow: 0 0 6px rgba(102, 102, 102, 0.1);display: flex;align-items: center;justify-content: center;margin: 0 auto;background: $background;position: relative;z-index: 2;cursor: pointer;transform: scale(.7);
    }

    &:before {content: '';display: block;width: 1px;left: 50%;background: #eee;position: absolute;top: 0;bottom: 0}
  }

  .flow-col {flex: 1;margin: 0 5px;display: flex;flex-direction: column;align-items: center;position: relative;

    &:before {content: '';display: block;width: 1px;top: 0; bottom: 0;left: 50%;background: #eee;position: absolute}
  }

  .flow-row {display: flex;position: relative}

  .flow-branch-btn {display: none}

  .flow-branch {padding: 40px 0 1px;display: flex;flex-direction: column;

    .flow-branch-btn {display: block;position: absolute;left: 50%;top: 0;transform: translateX(-50%);z-index: 2}

    &:before {content: '';display: block;left: 0;right: 0;bottom: 46px;top: 12px;border: 1px solid #eee;position: absolute}

    .flow-col { // 中线
      &:before {top: -28px}

      &:after {content: '';display: none;width: 50%;top: 0;background: $borderColor;}
    }

    .mask-left, .mask-right {position: absolute;background: $background;top: -28px;display: block;bottom: -1px;width: calc(50% + 9px)}

    .mask-left {left: -10px}

    .mask-right {right: -10px}
  }

  .flow-end {
    box-shadow: 0 2px 10px 0 rgb(145 145 153 / 50%);margin: 0 auto 30px;border-radius: 50%;position: relative;background: #bcbcc5;width: 50px;height: 50px;color: #fff;display: flex;align-items: center;justify-content: center;
  }

  &.type-show {
    // 展示模式

    .flow-branch {padding-top: 28px;

      &:before {bottom: 16px;top: 0;}
    }
  }

  .tools {text-align: right}
}

.flow-node-down {
  h3 {font-size: 14px;margin-bottom: 10px}

  div {display: flex}

  i {font-size: 14px;margin-right: 5px}
}

.flow-container.horizontal {
  $borderColor: #eee;

  .flow-main {flex-direction: row;justify-content: center}

  .flow-group:first-child {overflow: hidden;}

  .flow-col {flex-direction: row;margin: 8px 0;

    &:before {width: auto; right: 0;height: 1px;left: -29px;top: 50%}
  }

  .flow-add {padding: 0 8px;

    &:before {left: 0;top: 50%;height: 1px;width: 100%}
  }

  .flow-row {flex-direction: column}

  .flow-branch {flex-direction: row;align-items: center;padding: 0;

    .flow-branch-btn {position: static;transform: translateX(0);margin-right: 8px;

      button {width: 50px;white-space: normal;padding: 15px 10px;overflow: hidden;line-height: 14px}
    }

    &:before {bottom: 0;top: 0;left: 30px;right: 45px}

    .mask-left, .mask-right {left: -29px;right: -1px;width: auto; height: calc(50% + 8px)}

    .mask-left {top: -8px;}

    .mask-right {bottom: -9px;top: auto}
  }

  .flow-end {margin: 0}

  &.type-show {
    .flow-branch {padding-left: 28px;

      &:before {left: 0;right: 15px}
      .flow-add{}
    }
  }
}

// 侧栏drawer
.flow-modal-class {
  $borderColor: #eee;

  .el-drawer__header {border-bottom: 1px solid $borderColor;margin-bottom: 0;padding-bottom: 20px}
}

.flow-drawer {
  .tip {margin-bottom: 20px;color: #999;line-height: 22px}
}

// 设计主页
.design-flow-container {position: relative;

  .tools {position: absolute;right: 20px;top: 13px;z-index: 2}

  .tabs-info {display: flex;justify-content: center;

    form {width: 680px;}
  }
}

//工作台
.task-apply {
  .item {margin-bottom: 20px;

    h3 {font-size: 14px;margin-bottom: 10px}
  }

  .list {display: flex;margin: 0 -8px;

    > div {border: 1px solid #dcdfe6;padding: 16px;border-radius: 8px;height: 100px;margin: 0 8px;width: 24%;display: flex;align-items: center;font-weight: 700;transition: all .3s;cursor: pointer;box-shadow: 0 0 2px #ddd;

      &:hover {border-color: #409eff}
    }

    .icon {font-size: 36px;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;border-radius: 4px;overflow: hidden;color: #fff;margin-right: 10px;

      &:before {font-weight: 400}
    }
  }
}
