@import "~amos-jsplumb/assets/index.scss";
$lime: lime;
$lime-tint: rgba($lime, 0.65);

$actionlist: #AADF45;

%node-custom-container {
  @extend %node-container;

  justify-content: space-between;
}

%node-operator-item {
  width: 2rem;
  height: 2rem;
  padding: 0.1rem;
  line-height: 2rem;
  text-align: center;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.7);

  &:hover {
    background-color: rgba(193, 229, 238, 0.7);
    border-radius: 3px;
  }
}

@mixin make-giot-node($w: 150px, $h: 50px, $img: $default-img) {
  position: absolute;
  display: inline-block;
  width: $w;
  height: $h;
  font-size: 14px;
  color: black;
  cursor: pointer;
  // background: url($img) no-repeat;
  background-size: 100% 100%;
  &:hover {
    .node-content-wrapper {
      border: 2px dashed #888;

      .ele-node-action,
      .ele-catlog {
        display: block;
      }
    }
  }
}



.node-content {
  flex: 1;
  font-size: 20px;
  text-align: center;
}

.node-extra {
  flex: 0 0 2rem;
}

.node-content-wrapper {
  @extend %node-custom-container;

  &.node-wrapper-active {
    border: 2px dashed #BBB;
  }

  .ele-node-icon {
    width: 2.5rem;
    text-align: center;

    img {
      width: 1.5rem;
    }
  }

  .ele-node-content {
    flex: 1;
    padding: 0.5rem 0.5rem 0;
  }

  .ele-node-action {
    position: absolute;
    bottom: -2rem; // old -1.5rem
    left: 0;
    display: none;
    color: black;

    .action-extra-item {
      @extend %node-operator-item;
    }
  }

  .ele-catlog {
    position: absolute;
    top: -2rem; // old -1.5rem
    right: 0;
    display: none;
    color: black;

    .ele-catalog-operator {
      &.use-amos-icon {
        @extend %node-operator-item;
      }
    }
  }

  .amos-editable {
    &:hover {
      color: black;
    }

    .element-editor {
      width: 7rem;
    }

    .amos-input {
      width: 7rem;
      height: 2rem;
      padding: 0;
      color: black;
    }
  }
}

// 数据源
.data-node-ele {
  @include make-giot-node(12.13rem, 2.05rem, "././../../assets/iot/rule/ele-item-datanode.png");

  .node-content-wrapper {
    @extend %node-custom-container;

    .node-extra-add {
      flex: 0 0 2rem;
      height: 75px;
    }
  }
}
.data-node-ele-inner {
  position: absolute;
  display: inline-block;
  width: 12.13rem;
  height: 3.2rem;
  cursor: move;
  background:url("././../../assets/iot/rule/ele-item-datanode.png") no-repeat;
  background-size: 100% 100%;
  &:hover {
     border: 2px solid 1rem;
  }
}

// 告警节点
.alarm-node-ele {
  @include make-giot-node(12.13rem, 2.05rem, "././../../assets/iot/rule/ele-item-alarm.png");

  .node-content-wrapper {
    @extend %node-custom-container;

    .node-extra-add {
      flex: 0 0 2rem;
      height: 75px;
    }
  }
}
.alarm-node-ele-inner {
  position: absolute;
  display: inline-block;
  width: 12.13rem;
  height: 3.2rem;
  cursor: move;
  background:url("././../../assets/iot/rule/ele-item-alarm.png") no-repeat;
  background-size: 100% 100%;
  &:hover {
     border: 2px solid 1rem;
  }
}

// 输出节点
.output-node-ele {
  @include make-giot-node(12.13rem, 2.05rem, "././../../assets/iot/rule/ele-item-output.png");

  .node-content-wrapper {
    @extend %node-custom-container;

    .node-extra-add {
      flex: 0 0 2rem;
      height: 75px;
    }
  }
}
.output-node-ele-inner {
  position: absolute;
  display: inline-block;
  width: 12.13rem;
  height: 3.2rem;
  cursor: move;
  background:url("././../../assets/iot/rule/ele-item-output.png") no-repeat;
  background-size: 100% 100%;
  &:hover {
     border: 2px solid 1rem;
  }
}

// fire node
.fire-node-ele {
  position: absolute;
  display: inline-block;
  width: 79px;
  height: 88px;
  font-size: 14px;
  color: black;
  cursor: pointer;
  background-size: 100% 100%;

  &:hover {
    .node-content-wrapper {
      border: 2px dashed #888;
    }
  }
}
