/* hcg-resizable base styles */

.hcg-resizable {
  position: relative;
  box-sizing: border-box;
  touch-action: none;
}

.hcg-resizable-resizing {
  user-select: none;
}

/* Resize handles */

.hcg-resize-handle {
  position: absolute;
  margin: 0;
  padding: 0;
  z-index: 10;
  touch-action: none;
}

/* Edge handles */

.hcg-resize-handle-n {
  top: -3px;
  left: 0;
  right: 0;
  height: 7px;
  cursor: ns-resize;
}

.hcg-resize-handle-s {
  bottom: -3px;
  left: 0;
  right: 0;
  height: 7px;
  cursor: ns-resize;
}

.hcg-resize-handle-e {
  top: 0;
  bottom: 0;
  right: -3px;
  width: 7px;
  cursor: ew-resize;
}

.hcg-resize-handle-w {
  top: 0;
  bottom: 0;
  left: -3px;
  width: 7px;
  cursor: ew-resize;
}

/* Corner handles sit above edge handles */

.hcg-resize-handle-ne,
.hcg-resize-handle-se,
.hcg-resize-handle-sw,
.hcg-resize-handle-nw {
  width: 12px;
  height: 12px;
  z-index: 11;
}

.hcg-resize-handle-ne {
  top: -4px;
  right: -4px;
  cursor: nesw-resize;
}

.hcg-resize-handle-se {
  bottom: -4px;
  right: -4px;
  cursor: nwse-resize;
}

.hcg-resize-handle-sw {
  bottom: -4px;
  left: -4px;
  cursor: nesw-resize;
}

.hcg-resize-handle-nw {
  top: -4px;
  left: -4px;
  cursor: nwse-resize;
}

/* Disabled state hides interaction */

.hcg-resizable-disabled .hcg-resize-handle {
  display: none;
}