@import '../../node_modules/less-plugin-est/src/all.less';

@support-ie-version: 10;
@default-font-size: 14px;
@default-base-font-family: 'Helvetica Neue',Tahoma,Arial,PingFangSC-Regular,'Hiragino Sans GB','Microsoft Yahei',sans-serif;
@default-heading-font-family: 'Helvetica Neue',Tahoma,Arial,PingFangSC-Regular,'Hiragino Sans GB','Microsoft Yahei',sans-serif;

.global-normalize();

::-webkit-scrollbar
{
  width: 8px;
  height: 8px;
  background-color: #F5F5F5;
  margin-left: 4px;
}

::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 4px;
  background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: rgba(0,0,0,.45);
}

.wrapper{
  width: calc(100vw);
  height: calc(100vh);
  overflow: hidden;
  background-color: #F6F6F6;
}

.header-wrapper{
  height: 50px;
  padding: 0 16px;
  border-bottom: 1px solid #ddd;
  line-height: 50px;
  overflow: hidden;
}

.editor-main{
  width: 100%;
  height: calc(~"100vh - 51px");
}
.panel-wrapper{
  width: 300px;
  height: calc(~"100vh - 71px");
  margin: 10px 10px 10px 0;
  float: left;
  overflow-y: auto;
}

.panel-container{
}

.panel-card{
  margin-bottom: 10px;
}
.panel-card:last-child{
  margin-bottom: 0;
}

.canvas-wrapper{
  width: calc(~"100vw - 330px");
  height: calc(~"100vh - 71px");
  padding: 10px;
  float: left;
}

.canvas-container {
  height: calc(~"100vh - 73px");
  border: 1px solid #ddd;
  background: url(../images/canvas-bg.jpg) repeat #fff;
}

.flow-canvas {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  touch-action: none;
}

.legend {
  position: absolute;
  z-index: 4;
  border: 1px solid #2e6f9a;
  box-shadow: 2px 2px 19px #e0e0e0;
  opacity: 0.9;
  cursor: move;
  background-color: white;
  font-size: 14px;
  transition: background-color 0.25s ease-in;

  .legend-ep {
    display: none;
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: orange;
    cursor: pointer;
    box-shadow: 0 0 2px black;
    transition: box-shadow 0.25s ease-in;
  }

  .legend-ep.up-ep{
    top: -5px;
    right: 50%;
    margin-right: -5px;
  }

  .legend-ep.down-ep{
    bottom: -5px;
    right: 50%;
    margin-right: -5px;
  }

  .legend-ep.left-ep{
    left: -5px;
    top: 50%;
    margin-top: -5px;
  }

  .legend-ep.right-ep{
    right: -5px;
    top: 50%;
    margin-top: -5px;
  }

  .legend-ep:hover {
    box-shadow: 0 0 6px black;
  }
}

.legend.active-node{
  background-color: orange;
  color: white;
  .legend-ep {
    display: inline-block;
  }

}

.legend.active-node:hover{
  background-color: orange;
}

.legend:hover {
  background-color: #5c96bc;
  color: white;
}

.legend.start-legend,
.legend.end-legend{
  width: 72px;
  height: 72px;
  line-height: 72px;
  text-align: center;
  border-radius: 50%;
}

.legend.node-legend{
  padding: 20px;
  border-radius: 4px;

  .legend-text{
    line-height: 32px;
  }
}

.legend.action-legend{
  padding: 20px;
  border-radius: 4px;
  transform: skew(30deg);
  .legend-ep,
  .legend-text{
    transform: skew(-30deg);
  }
  .legend-ep.up-ep{
    margin-right: -10px;
  }
  .legend-ep.down-ep{
    margin-right: 0;
  }
  .legend-ep.left-ep{

  }
  .legend-ep.right-ep{

  }
  .legend-text{
    display: inline-block;
    line-height: 32px;
  }
}

.aLabel {
  -webkit-transition: background-color 0.25s ease-in;
  -moz-transition: background-color 0.25s ease-in;
  transition: background-color 0.25s ease-in;
  background-color: white;
  opacity: 0.8;
  padding: 0.3em;
  border-radius: 0.5em;
  border: 1px solid #346789;
  cursor: pointer;
  font-size: 14px;
}

.aLabel.jtk-hover, .jtk-source-hover, .jtk-target-hover {
  background-color: #1e8151;
  color: white;
}

.aLabel.active-line{
  background-color: orange;
  color: white;
  z-index: 1;
}

.jtk-connector.active-line{
  path:nth-child(2){
    stroke: orange;
  }

  path:last-child{
    fill: orange;
    stroke: orange;
  }
}

.flow-canvas .jtk-endpoint {
  z-index: 3;
}

.dragHover {
  border: 2px solid orange;
}

path, .jtk-endpoint { cursor:pointer; }
