/**
 * File Path: assets/css/admin/mbs-sortable.css
 *
 * Shared Sortable UI Styles
 *
 * Canonical base rules for drag-and-drop sort controls produced by
 * MBS_Sortable_UI (PHP) and consumed by MBS.SortableList (JS).
 *
 * Classes defined here:
 *   .mbs-drag-handle       -- dashicons-menu hamburger grip (PRO tier only).
 *   .mbs-reorder-controls  -- wrapper div for up/down fallback buttons.
 *   .mbs-reorder-move-up   -- move-up button inside .mbs-reorder-controls.
 *   .mbs-reorder-move-down -- move-down button inside .mbs-reorder-controls.
 *   .mbs-sortable-placeholder -- jQuery UI Sortable drag-target gap.
 *
 * Context-specific sizing overrides live in their own component stylesheets
 * (mbs-book-editor.css, formatting-order-controls.css, etc.).
 *
 * Handle: mbs-sortable-styles
 * Dependency: mbs-admin
 *
 * @package    My_Book_Showroom
 * @since      1.4.0
 */

/* ── Drag handle (dashicons-menu) ────────────────────────────────────────── */

.mbs-drag-handle {
	cursor: grab;
	color: #787c82;
	flex-shrink: 0;
	font-size: 20px;
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

.mbs-drag-handle:active {
	cursor: grabbing;
}

/* ── Up/down arrow fallback controls ─────────────────────────────────────── */

.mbs-reorder-controls {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.mbs-reorder-controls .button-link,
.mbs-reorder-move-up,
.mbs-reorder-move-down {
	color: #787c82;
	padding: 2px;
	border: none;
	background: none;
	cursor: pointer;
	line-height: 1;
}

.mbs-reorder-controls .button-link:hover,
.mbs-reorder-move-up:hover,
.mbs-reorder-move-down:hover {
	color: #1d2327;
}

.mbs-reorder-controls .button-link[disabled],
.mbs-reorder-controls .button-link:disabled,
.mbs-reorder-move-up[disabled],
.mbs-reorder-move-up:disabled,
.mbs-reorder-move-down[disabled],
.mbs-reorder-move-down:disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

.mbs-reorder-controls .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* ── jQuery UI Sortable drag-target placeholder ───────────────────────────── */

/*
 * .mbs-sortable-placeholder is the class passed to jQuery UI sortable as
 * `placeholder`. jQuery UI sets visibility:hidden on it; the !important
 * override below ensures the drop-zone gap stays visible while dragging.
 */
.mbs-sortable-placeholder {
	border: 2px dashed var(--mbs-status-info);
	background: #f0f6fc;
	border-radius: 3px;
	visibility: visible !important;
	list-style: none;
}
