@import '~@wordpress/base-styles/colors';

.spinner-container {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

// Fix editor width. We don't use resizable editor wrapper so we need to set the width manually here
.editor-visual-editor > div {
  width: 100%;
}

#mailpoet-email-editor {
  .editor-header__toolbar {
    flex-grow: 1;
  }
  .editor-header__center {
    flex-grow: 3;
  }
}

// Specific styles for the component EmailTypeInfo
// Styles are based on the Block Card component from Gutenberg block editor
.mailpoet-email-sidebar__email-type-info {
  .components-panel__row {
    align-items: flex-start;
  }

  .mailpoet-email-type-info__icon {
    flex: 0 0 24px;
    margin-left: 0;
    margin-right: 12px;
  }

  .mailpoet-email-type-info__content {
    flex-grow: 1;
    margin-bottom: 4px;

    h2 {
      font-size: 13px;
      line-height: 24px;
      margin: 0 0 4px;
    }

    span {
      font-size: 13px;
    }
  }
}

.mailpoet-email-editor__settings-panel {
  .mailpoet-settings-panel__subject .components-base-control__label {
    width: 100%;

    .components-external-link {
      float: right;
    }
  }

  .mailpoet-settings-panel__help {
    margin-bottom: 20px;

    .components-text {
      color: #757575;
    }
  }

  .mailpoet-settings-panel__preview-text .components-base-control__label {
    width: 100%;
  }

  .mailpoet-settings-panel__preview-text-length {
    color: $black;
    display: inline-block;
    float: right;
    padding: 3px;
  }

  .mailpoet-settings-panel__preview-text-length-warning {
    color: $alert-yellow;
  }

  .mailpoet-settings-panel__preview-text-length-error {
    color: $alert-red;
  }
}

.edit-post-visual-editor {
  line-height: 1.4; /* Recommended line-height that is also used in the email editor */
  margin: 0;
  min-height: 100%;
  padding: 0;
  -webkit-text-size-adjust: 100%; /* From MJMJ - Automatic test adjustment on mobile max to 100% */
  -ms-text-size-adjust: 100%; /* From MJMJ - Automatic test adjustment on mobile max to 100% */
  word-spacing: normal;
}

.visual-editor__email_layout_wrapper {
  height: 100%;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.visual-editor__email_content_wrapper {
  display: flex;
  height: 100%;
  width: 100%;

  > div {
    width: 100%;
  }

  // Fix for mobile preview height
  &.is-mobile-preview {
    > div {
      display: block !important;
    }
    .editor-styles-wrapper {
      height: auto !important;
    }
  }
}

// Hide the advanced settings in the sidebar. This panel is not used in the email editor at this moment.
.block-editor-block-inspector__advanced {
  display: none;
}