/* Border & color animation on item placed in new spot */
.Sortable-item.is-added {
  --border-from: theme(colors.primary.600);
  --border-to: theme(colors.gray.300);
  --bg-from: theme(colors.primary.25);
  --bg-to: theme(colors.white.DEFAULT);

  @apply animate-sortable-added;
}

.Sortable-item.is-added *,
.Sortable-item.is-added *::before {
  --bg-start: theme(colors.primary.25);
  --bg-end: theme(colors.white.DEFAULT);

  @apply animate-sortable-added-bg;
}

.Sortable-drag.Sortable-selected,
.Sortable-drag.Sortable-chosen {
  --drag-count: 1;

  @apply flex items-center justify-center rounded-lg !border !border-solid border-primary-600 bg-primary-25 content-[--drag-label] before:text-sm before:font-semibold before:!text-gray-700 before:!no-underline before:content-["Move_"_counter(count)_"_item"_attr(item-suffix)] before:[counter-reset:count_var(--drag-count)];

  > * {
    @apply !hidden;
  }
}

/* Override opacity 0.8 style coming from Sortablejs. */
.Sortable-drag {
  @apply animate-sortable-drag !opacity-100;
}

.Sortable-ghost {
  @apply scale-x-95 !border !border-dashed !border-primary-600 !bg-primary-25 before:!hidden after:!hidden;
}

.MultiSortable-buttonToggle {
  @apply btu-button btu-button-text-hidden btu-button-gray btu-button-xs bg-white before:btu-icon before:btu-icon-list-end touch-device:btu-button-sm;
}

.Sortable-selected .MultiSortable-buttonToggle {
  @apply !bg-primary-50 before:text-primary-800;
}

/* RCIGs do not get this cursor because they use handles and the whole thing isn't draggable */
.MultiSortable:not(.RCIG-item) {
  @apply hover:cursor-move;
}
