/* 並べ替え可能な項目の左端に置く共通ハンドル。 */
.layer[draggable=true],
.page-card[draggable=true] { cursor: default; }
.noabase-drag-handle,
.slot .slot-drag.noabase-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 1px solid #cbd2dc;
  border-radius: 50%;
  background: #fff;
  color: #778392;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.noabase-drag-handle::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 5px 0 currentColor, 0 5px currentColor, 5px 5px currentColor, 0 10px currentColor, 5px 10px currentColor;
  transform: translate(-2.5px, -5px);
  pointer-events: none;
}
.noabase-drag-handle:hover { background: #f0f3f7; border-color: #98a5b5; }
.noabase-drag-handle:active,
.slot .slot-drag.noabase-drag-handle:active { cursor: grabbing; }
.noabase-reordering,
.noabase-reordering * { cursor: grabbing !important; }

/* 移動先の境界線は、左端の白抜き丸でも位置を示す。 */
.layer.drop-before::after,
.layer.drop-after::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: -4px;
  width: 8px;
  height: 8px;
  border: 2px solid #8660df;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  z-index: 1;
}
.layer.drop-before::after { top: -7px; }
.layer.drop-after::before { bottom: -7px; }
.slot.drop-before, .slot.drop-after { position: relative; }
.slot.drop-before::before, .slot.drop-after::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: -4px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
}
.slot.drop-before::before { top: -5.5px; }
.slot.drop-after::before { bottom: -5.5px; }