/* ========================================================================
   GagaMuller Learning — 12-deck-reorder.css
   Dragging a slide or a module in the deck: where it will land, and nothing
   else.
   ======================================================================== */

/* THE ITEM BEING DRAGGED IS LEFT ALONE.

   The editor's block list fades the item it is carrying - a convention borrowed
   from file managers that reads here as "this slide is being deleted". There is
   deliberately no rule fading .dk-thumb or .dk-mod-group during a drag; the
   browser's own drag image is an opaque snapshot, and the thumbnail left in
   place goes on looking exactly like a thumbnail until it moves.

   The only feedback is the line below, which is the one thing somebody needs:
   where it is going. */

/* A blue line in the gap, drawn on the element either side of it rather than as
   a floating element - a floating one can be orphaned on the page when a drag
   ends somewhere unexpected, and this cannot. ::after is used for both sides so
   neither competes with ::before, which the thumbnails already use. */
.dk-thumb, .dk-mod-group, .dk-slides{position:relative;}

.dk-drop-before::after,
.dk-drop-after::after{
  content:''; position:absolute; left:0; right:0; height:3px;
  background:var(--brand-solid); border-radius:999px;
  /* Above the thumbnail's own frame and its selected outline, or the line is
     half-hidden behind whatever it is pointing between. */
  z-index:4; pointer-events:none;
}
.dk-drop-before::after{top:-2px;}
.dk-drop-after::after{bottom:-2px;}

/* A round cap at the leading edge, so a 3px line reads as an insertion point
   rather than as a border somebody has accidentally switched on. */
.dk-drop-before::after,
.dk-drop-after::after{
  box-shadow:-3px 0 0 0 var(--brand-solid), 3px 0 0 0 var(--brand-solid);
}

/* A module being dropped between modules gets its line clear of the group's
   own padding, so it sits in the gap between two modules rather than on top of
   the first thumbnail of one. */
.dk-mod-group.dk-drop-before::after{top:-5px;}
.dk-mod-group.dk-drop-after::after{bottom:-5px;}

/* Dropping onto a module with no slides in it - there is no thumbnail to aim
   at, so the empty list itself takes the line. */
.dk-slides.dk-drop-after::after{bottom:4px;}

/* The cursor says it is liftable before anything is picked up. */
.dk-thumb[draggable="true"], .dk-mod-head[draggable="true"]{cursor:grab;}
.dk-thumb[draggable="true"]:active, .dk-mod-head[draggable="true"]:active{cursor:grabbing;}

/* The module name is a text input inside the drag handle. Without this a press
   meant to put the caret in it starts a module drag instead. */
.dk-mod-head input{cursor:text;}