/**
 * Shared spacing helpers for Text Section margin toggles + Spacer block.
 */

.speech-app-section--margin-top {
  margin-top: 36px;
}

.speech-app-section--margin-bottom {
  margin-bottom: 36px;
}

/**
 * Spacer: 1px box + top margin (size − 1px).
 * Top margin can collapse with the block above so spacing melds
 * instead of always stacking a hard height.
 */
.page-spacer {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.page-spacer--small {
  margin-top: 11px; /* + 1px height = 12px */
}

.page-spacer--medium {
  margin-top: 23px; /* + 1px height = 24px */
}

.page-spacer--large {
  margin-top: 35px; /* + 1px height = 36px */
}

/* Editor: show where the spacer sits (min-height so the preview is visible) */
.editor-styles-wrapper .page-spacer--is-preview {
  position: relative;
  pointer-events: auto;
  min-height: 24px;
  height: auto;
  border: 1px dashed #c3c4c7;
  border-radius: 4px;
  background: repeating-linear-gradient(
    -45deg,
    #f6f7f7,
    #f6f7f7 6px,
    #fff 6px,
    #fff 12px
  );
}

.editor-styles-wrapper .page-spacer--is-preview::after {
  content: attr(data-editor-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 12px;
  line-height: 1.2;
  color: #646970;
  text-align: center;
}