/* A list whose rows are dragged into order: the watchlist, and the dashboard's
 * sections. Pairs with draggable_controller.js, which takes .js-draggable-handle
 * as the grab target and sets .dragging on the row being moved. */
@layer components {
  .reorderable-list {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .reorderable-list__item {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);
  }

  /* The no-js fallback: a number per row, submitted instead of a drag. */
  .reorderable-list__position {
    inline-size: 5rem;
  }

  /* Draggable listens for the drag on .js-draggable-handle itself, and .icon
     sets pointer-events: none - correct for a glyph inside a button, wrong for
     one that *is* the control. Without this the handle stops being grabbable
     and the cursor never changes. */
  .reorderable-list__handle {
    --icon-size: var(--icon-md);

    color: var(--color-ink-medium);
    cursor: move;
    flex: none;
    pointer-events: auto;
  }

  /* The row's label is its content, not a caption for the control beside it,
     so it takes body text rather than the quiet treatment forms.css gives
     labels. */
  .reorderable-list__item label {
    color: var(--color-ink);
    font-size: var(--text-normal);
  }

  .dragging {
    opacity: 0.3;
  }

  /* The row being carried. Draggable clones it to the body, where it has no
     canvas behind it and nothing to lift it off the list it is crossing. */
  .draggable-mirror {
    background: var(--color-canvas);
    border-radius: 0.5ch;
    box-shadow: 0 0.5ch 1.5ch oklch(0 0 0 / 0.15);
    cursor: move;
    padding-inline: var(--inline-space-half);
    z-index: var(--z-flash);
  }
}