.flow-item {
  position: absolute;
  z-index: 2;
  display: inline-block;
  width: 210px;
  height: auto;
  min-height: 74px;
  padding: 12px;
  vertical-align: top;
  background: $white;
  border-radius: 4px;
  cursor: pointer;
  transition: box-shadow 0.3s ease-in-out, transform 0.5s ease-in-out;
  @extend %shallow-shadow;

  &:hover {
    @extend %hover-shadow;
  }

  .pipeline-item-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
  }

  svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .item-point {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    background: transparent;
    border-radius: 100%;
    transition: all 0.3s ease-in-out;

    .iconfont {
      display: block;
      width: 12px;
      height: 12px;
      font-size: 10px;
    }

    &:hover {
      @extend %hover-shadow;
    }
  }

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

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

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

  .icon-ellipsis {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
  }

  .yaml-editor-item-title,
  .yaml-editor-pipeline-item-title {
    display: inline-block;
    width: 135px;
    height: 20px;
    overflow: hidden;
    color: $color-dark-8;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .yaml-editor-item-name {
    margin-top: 4px;
    color: $color-dark-4;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;
  }

  .yaml-editor-item-title-name {
    .relation-list {
      margin-bottom: 0;
      border-top: 1px solid $color-border;

      .relation-text {
        color: $color-text-sub;
      }

      .relation-icon {
        color: $color-text-desc;
        font-size: 14px;
      }
    }
  }

  .yaml-editor-item-alias {
    margin-top: 4px;
    color: $color-dark-4;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;

    .yaml-editor-item-alias-text {
      display: inline-block;
      line-height: 16px;
      vertical-align: middle;
    }
  }

  .table-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 16px;
    height: 16px;
    color: $color-dark-2;
  }

  .yaml-editor-item-time {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: auto;
    height: 20px;
    vertical-align: middle;

    i,
    span {
      display: inline-block;
      vertical-align: middle;
    }

    .yaml-editor-item-time-text {
      width: auto;
      min-width: 35px;
      text-align: right;
    }
  }

  .pipeline-node-icon {
    position: absolute;
    top: 12px;
    right: 10px;
    width: auto;
    color: $color-dark-4;
    cursor: pointer;
  }
}
