@type: 'extra';
@element: 'custom';

@import (multiple, reference, optional) '../../theme.config';

@borderColor: rgba(120, 192, 215, 0.75);

.block-editor-dividerBlock {
  fieldset {
    padding: 0;
    border: none;

    legend {
      position: absolute;
      z-index: 3;
      top: -1.3em;
      left: 0;
      width: fit-content;
      padding: 0 1rem;
      margin-right: auto;
      margin-left: auto;
      background-color: @pageBackground;
      color: @borderColor;
      cursor: pointer;
      text-align: center;
    }
  }
}

.ui.divider.short {
  width: 50%;
  margin-inline: auto;
}

.ui.divider {
  &.divider-spacing-s {
    margin-block: var(--spacing-block-sm, 1rem);
  }

  &.divider-spacing-m {
    margin-block: var(--spacing-block-md, 1.5rem);
  }

  &.divider-spacing-l {
    margin-block: var(--spacing-block-lg, 2rem);
  }
}