@import "../styles/common";

.w-svg-editor{
  .flex_parent_column();

  border: 1px solid #ddd;

  &-toolbox{
    .flex_parent();
    border-bottom: 1px solid #ddd;
    padding: 10px;

    &-item{
      margin-right: 10px;
      cursor: pointer;

      &.active{
        color:red;
      }
    }
  }

  &-content{
    .flex_child_column();
    position: relative;
    overflow: hidden;
    outline: none;

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

  &-draw-shadow{
    position: absolute;
    z-index: 20;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(224,224,224,0.8);
    .flex_center();
    font-size: 30px;
    color:#999;
  }
}

.w-svg-editor-selected-rect{
  stroke-dasharray:10 10;
}


.w-svg-editor-node{
  &.selected,
  &:hover{
    .w-svg-editor-selected-rect{
      display: block !important;
    }
  }

  &.selected{
    .w-svg-editor-selected-rect{
      stroke-dasharray: none;
    }
  }
}

.w-svg-editor-path{
  &-line{
    &:hover{
      stroke:red;
    }
  }

  &-point{
    &:hover,
    &.selected{
      fill:red;
    }

    &-curve{
      fill:transparent;
      stroke:#333;
    }
  }



}

.w-svg-editor-rotate{
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%,-50%);
  display: none;

  &.selected{
    display: block;
  }
}


.w-svg-editor-text{
  user-select: none;
}

.w-svg-editor-textarea{
  position:absolute;
  z-index: 9999;
  padding: 0;
  border: 0;
  resize: none;
  outline: none;
  background: transparent;
}