.line {
  position: absolute;
  background: var(--easyv-primary-color);
  pointer-events: none;
  display: none;
}

:global(.selected),
:global(.z-hover) {
  & > .line {
    display: block;
  }
}

:global {
  .react-draggable {
    cursor: pointer !important;
    &.isPanel:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0, 132, 255, 0.02);
      pointer-events: none;
    }
    &.hideAfter::after {
      background-color: transparent;
    }
    &.selected {
      cursor: move !important;
      &.isPanel:hover:after {
        content: '双击编辑动态面板';
        position: absolute;
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        background: rgba(0, 132, 255, 0.15);
        pointer-events: none;
        font-size: 18px;
      }
      &.isRef:hover:after {
        content: '双击编辑引用面板';
      }
    }
    &.hide {
      background: rgba(76, 255, 231, 0.15);
    }
    &.z-hover {
      &.isPanel:after {
        content: '双击编辑动态面板';
        position: absolute;
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        background: rgba(0, 132, 255, 0.15);
        pointer-events: none;
        font-size: 18px;
      }
      &.isRef:after {
        content: '双击编辑引用面板';
      }
    }
  }
  .space .react-draggable {
    cursor: grab !important;
  }
}

.interactionIcon {
  position: absolute;
  background: #fff;
  right: 0;
  top: 0;
  width: 16px;
  height: 16px;
  transform-origin: right top;
  cursor: pointer;
  :global {
    .icon-icon_color {
      line-height: 16px;
    }
  }
  &:hover {
    width: 17px;
    height: 17px;
    :global {
      .icon-icon_color {
        line-height: 17px;
      }
    }
  }
}
