/* Reordering is a mode the action bar switches on: a checkbox in a glass
   button, inverted while it's on. Rows show a handle to drag them by and
   stop swiping, so a drag can't turn into a swipe halfway through. */
.reorder-toggle {
  &:has(:checked) {
    --btn-background: var(--color-text);
    --btn-color: var(--color-text-reversed);
    --btn-hover-color: var(--color-text);
  }

  &:has(:focus-visible) {
    outline: var(--border-2) solid var(--color-selected-dark);
    outline-offset: var(--border-2);
  }
}

/* Touch on the handle is the drag's alone: no scrolling. */
.drag-handle {
  --icon-color: var(--color-text-subtle);
  --icon-size: var(--size-5);

  align-items: center;
  align-self: stretch;
  cursor: grab;
  display: none;
  flex-shrink: 0;
  touch-action: none;
}

body:has(#reordering:checked) {
  .drag-handle {
    display: flex;
  }

  .swipe {
    overflow-x: hidden;
  }
}

.list-row--ghost {
  opacity: var(--opacity-50);
}