/* hcg-sortable base styles */

.hcg-sortable {
  /* Avoid the browser's native touch scrolling fighting drag gestures. */
  touch-action: none;
}

.hcg-sortable > * {
  /* Prevent accidental text selection while dragging. */
  user-select: none;
  backface-visibility: hidden;
}

.hcg-sortable.hcg-sortable-cursor:not(.hcg-sortable-disabled) > * {
  cursor: var(--hcg-sortable-cursor, grab);
}

.hcg-sortable-disabled {
  touch-action: auto;
}

.hcg-sortable-disabled,
.hcg-sortable-disabled * {
  cursor: default !important;
}

/* The element currently being dragged (floated above the list). */
.hcg-sortable-drag {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  opacity: 0.95;
  cursor: var(--hcg-sortable-cursor-active, grabbing);
}

/* While a drag is live, force the active cursor everywhere. The floated
   item has pointer-events:none, so without this the cursor would reflect the
   element beneath it (e.g. a handle's grab cursor). */
body.hcg-sortable-dragging,
body.hcg-sortable-dragging * {
  cursor: var(--hcg-sortable-cursor-active, grabbing) !important;
}

/* Auto-generated placeholder that marks the drop slot. */
.hcg-sortable_placeholder {
  background: rgba(99, 102, 241, 0.12);
  border: 2px dashed rgba(99, 102, 241, 0.6);
  border-radius: 6px;
}

/* Optional helper layout for grid-mode containers. */
.hcg-sortable-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 10px;
}

/* Optional helper layout for horizontal (x-axis) containers. */
.hcg-sortable-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
}