/* 
   基本状態とカーソル制御:
   通常時は grab カーソル、ドラッグ中は grabbing に固定。
*/
[data-sortable-images-target="image"] {
    cursor: grab;
    transition: all 0.2s ease-in-out;
}

[data-controller="sortable-images"].is-sorting,
[data-controller="sortable-images"].is-sorting [data-sortable-images-target="image"] {
    cursor: grabbing;
}

/* マウスオーバー時の効果（JSで .is-hovered を制御） */
[data-sortable-images-target="image"].is-hovered {
    opacity: 0.75;
}

/* ドラッグ中の要素（透明度を下げて背後の変化を見やすくする） */
[data-sortable-images-target="image"].dragging {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    z-index: 10;
    opacity: 0.5;
}

/* 挿入予定位置のハイライト */
[data-sortable-images-target="image"].is-drop-target {
    background-color: rgba(59, 130, 246, 0.2);
}

/* FLIPアニメーション用: transform の復元をスムーズにする */
[data-sortable-images-target="image"].is-animating {
    transition: transform 350ms ease-in-out;
}

/* 削除ボタン */
.delete-button {
    transition: transform 0.15s ease-out;
}

.delete-button:hover {
    transform: scale(1.1);
}

.delete-button:active {
    transform: scale(0.95);
}