@import "./vars.scss";

$rule-prop-bar-border: #797979;
$rule-prop-bar-bg: #FAFAFA;
$header-bg-color: linear-gradient(180deg, rgba(216, 216, 216, 1) 0%, rgba(216, 216, 216, 1) 0%, rgba(228, 228, 228, 1) 100%, rgba(228, 228, 228, 1) 100%);

.rule-layout {
  height: 100%;

  .stage-header {
    .rule-header-extra-item {
      width: 50px;
      height: 50px;
      line-height: 50px;
      border-left: 1px solid lightgray;
    }

    .rule-header {
      border-left: none;
    }
  }

  .rule-stage-container {
    display: flex;
    height: 100%;

    .rule-property-bar {
      flex: 0 0 10%;
      background-color: $rule-prop-bar-bg;

      .rule-property-head {
        width: 100%;
        height: 50px;
        padding-top: 10px;
        background-color: white;

        .rule-property-text {
          width: 60%;
          height: 40px;
          font-family: 'Microsoft Sans Serif Normal', 'Microsoft Sans Serif';
          font-weight: 400;
          font-style: normal;
          font-size: 14px;
          text-align: center;
          line-height: 40px;
          margin-left: 10%;
          border: 1px solid #deddde;
          color: #345FA6;
          background: -webkit-gradient(linear, left top, left bottom, from(#e4e4e4), color-stop(0%, #e4e4e4), color-stop(100%, #f2f2f2), to(#f2f2f2));
          background: linear-gradient(180deg, #e4e4e4 0%, #e4e4e4 0%, #f2f2f2 100%, #f2f2f2 100%);
          border-radius: 4px 4px 0 0;
        }
      }

      .rule-property-header {
        background: $header-bg-color;
        // border-bottom: 1px solid $rule-prop-bar-border;

        .rule-header-extra {
          .goit-search-ipt {
            margin-left: 0.5rem;
          }
        }
      }

      .rule-property-content {
        width: 16rem;
        height: calc(100% - 3rem);
        overflow: auto;
      }
    }

    .rule-stage {
      flex: 1;

      .rule-scene {
        height: calc(100% - 3rem);
        background: url("../../assets/iot/rule/default-scene.png") repeat;
        background-color: $grey-tint;
      }
    }
  }

  .trigger-editor {
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 100;
    display: block;
    height: calc(100% - 50px);
    border-left: 1px solid lightgray;

    .trigger-editor-content {
      height: 100%;
      background: $grey-deep;

      &.expanded {
        width: 30rem;
      }
    }

    .slider-right {
      display: none;
    }
  }
}

.ele-header {
  height: 3rem;
  padding-left: 1rem;
  font-size: 16px;
  line-height: 2.8rem;
  background: #E9E9E9;
}

.property-content {
  &.card-content {
    text-align: center;
  }

  .property-item {
    display: flex;
    align-items: center;
    height: 2.5rem;
    // padding: 0.5rem;
    margin: 0.5rem 0;
    cursor: move;
    justify-content: space-between;
    background-size: 100% 100%;
    // box-shadow: 2px 2px 5px 0 $grey-tint;

    .property-item-type {
      width: 3rem;
      height: 2.5rem;
      line-height: 3rem;
      text-align: center;

      img {
        width: 1.5rem;
      }
    }

    .property-item-text {
      flex: 1;
      margin-left: 1rem;
      font-size: 12px;
    }
  }
}

// 元素列表

.rule-element-list {
  .general-ele-container {
    // border-bottom: 2px solid $rule-prop-bar-border;
  }
}

.ele-item-datanode {
  background: url("./../../assets/iot/rule/ele-item-datanode-prop.png") no-repeat;
}

.ele-item-alarm {
  background: url("./../../assets/iot/rule/ele-item-alarm-prop.png") no-repeat;
}

.ele-item-output {
  background: url("./../../assets/iot/rule/ele-item-output-prop.png") no-repeat;
}

.ele-item-requestresponse {
  background: url("./../../assets/iot/rule/ele-item-requestresponse-prop.png") no-repeat;
}
