/**
 * 3Syxty Studio — Sortable Component CSS
 *
 * Drag-and-drop reordering styles: ghost element, placeholder,
 * handle cursor, and transition animations.
 */

/* -----------------------------------------------------------------------
   Drag Handle
   ----------------------------------------------------------------------- */

.drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    cursor: grab;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    transition: color var(--motion-instant), background-color var(--motion-instant);
}

.drag-handle:hover {
    color: var(--text-secondary);
    background-color: var(--accent-primary-subtle);
}

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

.drag-handle svg {
    width: 14px;
    height: 14px;
}

/* -----------------------------------------------------------------------
   Ghost (floating clone while dragging)
   ----------------------------------------------------------------------- */

.sortable-ghost {
    box-shadow: var(--shadow-heavy);
    border-radius: var(--radius-lg);
    background-color: var(--surface-elevated);
    border: 1px solid var(--accent-primary);
    transform: scale(1.02);
    opacity: 0.9 !important;
}

/* -----------------------------------------------------------------------
   Dragging Item (original, faded)
   ----------------------------------------------------------------------- */

.sortable-drag {
    opacity: 0.3 !important;
}

/* -----------------------------------------------------------------------
   Chosen Item (before drag starts)
   ----------------------------------------------------------------------- */

.sortable-chosen {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

/* -----------------------------------------------------------------------
   Drop Placeholder
   ----------------------------------------------------------------------- */

.sortable-placeholder {
    background-color: var(--accent-primary-subtle);
    border: 2px dashed var(--accent-primary);
    border-radius: var(--radius-lg);
    opacity: 0.5;
}

/* -----------------------------------------------------------------------
   Keyboard Reorder Indicator
   ----------------------------------------------------------------------- */

[aria-grabbed="true"] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    box-shadow: var(--shadow-glow);
}