.shape {
  border-width: v-bind(borderWidth);
  border-color: v-bind(borderColor);
  border-style: v-bind(borderStyle);
  position: absolute;

  .error-info {
    color: red;
    font-size: 20px;
    white-space: nowrap;
  }
}

.active {
  @apply select-none hover:cursor-move;

  outline: 1px solid #70c0ff;
}

.shape-point {
  @apply absolute bg-white border border-solid border-blue-400 w-2 h-2 rounded-full z-10;
  margin-left: -4px;
  margin-top: -4px;
}

.rotation {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
  height: 20px !important;
  cursor: grab;

  &:active {
    cursor: grabbing;
  }
}

.icon-jiesuo {
  @apply absolute top-0 right-0;
}

div em {
  @apply absolute -top-6 left-0;
  background-color: #f0f8ff52;
  border-radius: 3px;
  color: antiquewhite;
}

.shape-point.lt.rotate-0,
.shape-point.rb.rotate-0,
.shape-point.l.rotate-45,
.shape-point.r.rotate-45,
.shape-point.lb.rotate-90,
.shape-point.rt.rotate-90,
.shape-point.t.rotate-135,
.shape-point.b.rotate-135 {
  cursor: nwse-resize;
}

.shape-point.t.rotate-0,
.shape-point.b.rotate-0,
.shape-point.lt.rotate-45,
.shape-point.rb.rotate-45,
.shape-point.l.rotate-90,
.shape-point.r.rotate-90,
.shape-point.lb.rotate-135,
.shape-point.rt.rotate-135 {
  cursor: ns-resize;
}

.shape-point.lb.rotate-0,
.shape-point.rt.rotate-0,
.shape-point.t.rotate-45,
.shape-point.b.rotate-45,
.shape-point.lt.rotate-90,
.shape-point.rb.rotate-90,
.shape-point.l.rotate-135,
.shape-point.r.rotate-135 {
  cursor: nesw-resize;
}

.shape-point.l.rotate-0,
.shape-point.r.rotate-0,
.shape-point.lb.rotate-45,
.shape-point.rt.rotate-45,
.shape-point.t.rotate-90,
.shape-point.b.rotate-90,
.shape-point.lt.rotate-135,
.shape-point.rb.rotate-135 {
  cursor: ew-resize;
}