// We don't want to allow user to remove Submit or Email + we hide core/column toolbar because it is empty
// There is no way to hide the delete button programmatically so we hide last toolbar that contains the delete option
// There is a feature request for adding that into Gutenberg https://github.com/WordPress/gutenberg/issues/16364
.mailpoet-form-submit-button,
.mailpoet-form-email-input {
  .block-editor-block-toolbar > .components-toolbar-group {
    display: none;
  }

  .block-editor-block-toolbar .components-toolbar-group {
    border-right: none;
  }
}

.edit-post-layout .interface-interface-skeleton__content {
  background-color: $color-white;
}

// Fix for fixed bar forms
// This will prevent editor width to grow and push sidebar out of the screen
.interface-interface-skeleton__editor {
  max-width: 100%;
}

// Fix for settings toolbar placement in header
.edit-post-header {
  flex-direction: row-reverse;
  justify-content: space-between;
}

// Hide tabs (Blocks, Patterns, ...) in block inserter, because we don't have patterns
// They are always visible in case user adds a block in the top level
.block-editor-inserter__tabs .components-tab-panel__tabs {
  display: none;
}

// Fix for default appender appearance
// We don't use any default block (WP Post editor has paragraph)
// and CSS distributed within packages is works only with the paragraph block
// We want to display it in center
.block-editor .block-editor-inserter .block-editor-button-block-appender.block-list-appender__toggle {
  margin: 0 auto;
}

// Html blocks contains iframe which captures clicks and in some cases prevents selecting block.
// This adds an transparent overlay over the iframe.
.mailpoet-html-block-editor-content-wrapper {
  position: relative;

  &:after {
    background: transparent;
    content: ' ';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}

// Wordpress displays h3 and h2 the same size by default. To make it less confusing we need to make h2 different size.
h2 {
  font-size: 1.7em;
}

// Remove block margins for first block and also first block in columns
// This is done to improve WYSIWYG experience
.mailpoet-form-background .block-editor-block-list__block:first-child {
  margin-top: 0;
}

// Remove min-height so that lower values of input padding have visible effect in form editor
.block-editor-block-list__layout .mailpoet_text,
.block-editor-block-list__layout .mailpoet_textarea {
  min-height: 0;
  // Remove box shadow on focus since we don't allow interactions with text fields in editor
  &:focus {
    box-shadow: none;
  }
}

// Ensure same default font size for input and submit button
.block-editor-block-list__layout .mailpoet_paragraph {
  .mailpoet_text,
  .mailpoet_submit {
    font-size: 1em;
    line-height: 1.5;
  }

  .mailpoet_text_label {
    font-size: 1em;
    line-height: 1.2;
  }
}

.mailpoet_toolbar_item {
  align-items: center;
  background-color: white;
  display: flex;

  .mailpoet-font-family-select {
    width: $grid-column-small;
  }

  // Force rendering of select arrow on the right
  .components-custom-select-control__button svg {
    margin-right: initial;
  }
}

// Adjustments for correct form width rendering
.wp-block {
  max-width: initial;
}

.block-editor-block-list__layout.is-root-container {
  padding-left: 0;
  padding-right: 0;
}

.edit-post-visual-editor {
  background-color: $color-white;
  // We use lager padding on top so that block tools toolbar doesn't hide under top bar
  padding: $grid-gap-large 10px 10px;
}

// Unify padding o wp-block-columns with background with front end rendering
.wp-block-columns.has-background {
  padding: 10px;
}