/*
BESD Spacer – Frontend + Editor
- Frontend: reiner Abstand (nur Höhe)
- Editor: sichtbarer Bereich mit Griff & px-Label (links, stets sichtbar)
*/

.besd-spacer {
  width: 100%;
  height: 20px;            /* Fallback – echte Höhe kommt inline aus PHP/Editor */
  line-height: 0;
  position: relative;
}

/* ---------- Editor-UI ---------- */
.editor-styles-wrapper .besd-spacer.is-editor,
.block-editor-writing-flow .besd-spacer.is-editor {
  background: repeating-linear-gradient(
    180deg,
    rgba(0,0,0,0.04) 0px,
    rgba(0,0,0,0.04) 8px,
    rgba(0,0,0,0.06) 8px,
    rgba(0,0,0,0.06) 16px
  );
  border: 1px dashed rgba(0,0,0,.15);
  border-radius: 6px;
  box-sizing: border-box;
  overflow: visible; /* WICHTIG: Label darf überstehen, bleibt immer sichtbar */
}

/* px-Label: links am Rand, immer sichtbar, blockiert keine Interaktionen */
.editor-styles-wrapper .besd-spacer.is-editor .besd-spacer__label,
.block-editor-writing-flow .besd-spacer.is-editor .besd-spacer__label {
  position: absolute;
  left: 8px;                 /* Label an linken Rand */
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  padding: 2px 8px;
  min-height: 18px;
  line-height: 1;
  white-space: nowrap;
  font-size: 12px;
  color: #111;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  pointer-events: none;      /* behindert kein Dragging */
  user-select: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* Drag-Handle: unten zentriert */
.editor-styles-wrapper .besd-spacer.is-editor .besd-spacer__handle,
.block-editor-writing-flow .besd-spacer.is-editor .besd-spacer__handle {
  position: absolute;
  left: 50%;
  bottom: -10px;            /* leicht überlappend nach unten */
  transform: translateX(-50%);
  width: 44px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: linear-gradient(#fff, #f3f4f6);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  cursor: ns-resize;
}

.editor-styles-wrapper .besd-spacer.is-editor .besd-spacer__handle:before,
.block-editor-writing-flow .besd-spacer.is-editor .besd-spacer__handle:before {
  content: "";
  position: absolute;
  inset: 5px 12px;
  border-top: 2px solid #9ca3af;
  border-bottom: 2px solid #9ca3af;
  border-radius: 2px;
}

.editor-styles-wrapper .besd-spacer.is-editor .besd-spacer__handle:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* ---------- Frontend-Säuberung ---------- */
/* Im Frontend werden Label & Handle nie angezeigt */
.besd-spacer .besd-spacer__label,
.besd-spacer .besd-spacer__handle {
  display: none;
}

/* Im Editor explizit anzeigen */
.editor-styles-wrapper .besd-spacer.is-editor .besd-spacer__label,
.editor-styles-wrapper .besd-spacer.is-editor .besd-spacer__handle,
.block-editor-writing-flow .besd-spacer.is-editor .besd-spacer__label,
.block-editor-writing-flow .besd-spacer.is-editor .besd-spacer__handle {
  display: block;
}