/**
 * Editor styles for the admin
 */

.block-editor-block-list__layout [data-type="dggb-blocks/dggb-spacer"] {
  margin-bottom: 1.2em;
}

.dggb-block-spacer {
  border: dashed 1px #ddd;
  margin-bottom: 0;

  .dggb-spacer-handle {
    margin-bottom: 0;
  }

  &.is-selected::before {
    outline: none;
  }

  .block-editor-block-list__block-edit {
    outline: 1px dashed #ddd;
  }

  &.is-selected .block-editor-block-list__block-edit,
  &.is-hovered .block-editor-block-list__block-edit {
    outline: 1px dotted #ddd;
  }

  &.is-selected .block-editor-block-list__block-edit {
    outline: 1px solid #ddd;
  }
}

.dggb-spacer-control__resize-handle {
  background: none;
  background: none;
  border-radius: 0;
  bottom: -15px !important;
  cursor: row-resize !important;
  display: none;
  height: 32px !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 999;

  .block-editor-block-list__block[data-type="dggb-blocks/dggb-spacer"].is-selected
    &,
  .block-editor-block-list__block[data-type="dggb-blocks/dggb-spacer"].is-hovered
    & {
    display: block;
  }

  &:after {
    background-color: #32373c;
    border-radius: 50px;
    border: 2px solid #fff;
    content: "";
    display: block;
    height: 12px;
    left: 50%;
    margin-left: -8px;
    margin-top: -6px;
    position: absolute;
    top: 50%;
    width: 12px;
  }
}