/* Reordering by drag: businesses by their awning, rows by their grip. */

@layer components {
  /* The businesses themselves are dragged by their awning (products page, for
     who may arrange them). While dragging, every section folds down to its
     awning, a see-through copy of the awning follows the pointer, and an
     awning-size slot in the dragged business's colors shows where it lands. */
  .business-tag.handle {
    cursor: move;
    /* a finger scrolls; holding it starts the drag (lib/hold.ts) */
    touch-action: manipulation;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;

    &:focus-visible { outline-offset: 4px; }
  }
  .business-list.sorting {
    cursor: move;
    user-select: none;
    -webkit-user-select: none;

    .business {
      margin-bottom: 1.25rem;

      > :not(.business-tag) { display: none; }
    }
  }
  .business-ghost {
    --frame: 7px;
    --overhang: 12px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    opacity: 0.7;
    pointer-events: none;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.25));

    .business-tag { margin-bottom: 0; }
  }
  .business-slot {
    margin: 2.75rem calc(-7px - 12px) 1.25rem;

    .drop-slot-box { height: 3.2rem; }
  }
  tbody[data-controller~="sortable"].dragging {
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
  }

  /* While dragging: a see-through copy of the row under the pointer… */
  .drag-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    margin: 0;
    table-layout: fixed;
    opacity: 0.7;
    pointer-events: none;
    background: var(--paper);
    outline: 2px solid var(--ink);
    border-radius: 6px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22), 0 3px 0 var(--ink);

    td { border-bottom: 0; }
  }
  /* …and a dashed slot where it will land. */
  tr.drop-slot {
    &:hover { background: none; }

    /* as specific as the strip it replaces (business.css), and later */
    .business tbody & td:first-child {
      padding: 4px 6px;
      box-shadow: none;
    }
  }
  .drop-slot-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--ink);
    border-radius: 10px;
    background: repeating-linear-gradient(
      -45deg, var(--biz) 0 8px, var(--biz-text) 8px 16px);
    /* a hint of where it lands, quieter than the row being dragged */
    opacity: 0.45;

    /* The label sits on a patch of the business color, so it reads over the
       stripes. */
    span {
      background: var(--biz);
      color: var(--biz-text);
      border: 2px solid var(--ink);
      border-radius: var(--radius-pill);
      padding: 0.15rem 0.9rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-size: 0.85rem;
    }
  }
}