.component-controls {
  position: absolute;
  top: calc(4px * var(--canvas-zoom-inverse, 1));
  right: calc(4px * var(--canvas-zoom-inverse, 1));
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
  transform-origin: top right;
  transform: scale(var(--canvas-zoom-inverse, 1));
}

.component:hover .component-controls {
  opacity: 1;
}

.ctrl-btn {
  width: 16px;
  height: 16px;
  background: #666;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.8;
}

.ctrl-btn:hover {
  opacity: 1;
  background: #000;
}

/* Icon masks */
.move-btn {
  cursor: grab;
  mask: url("icons/move.svg") center/contain no-repeat;
  -webkit-mask: url("icons/move.svg") center/contain no-repeat;
}
.move-btn:active {
  cursor: grabbing;
}
.edit-btn {
  mask: url("icons/edit.svg") center/contain no-repeat;
  -webkit-mask: url("icons/edit.svg") center/contain no-repeat;
}
.copy-btn {
  mask: url("icons/copy.svg") center/contain no-repeat;
  -webkit-mask: url("icons/copy.svg") center/contain no-repeat;
}
.delete-btn {
  mask: url("icons/delete.svg") center/contain no-repeat;
  -webkit-mask: url("icons/delete.svg") center/contain no-repeat;
}