// Gutenberg editor styles
//
// Please note: These styles affect only wp-admin
// editor side. Please remember to add imports
// from "Gutenberg blocks" also to the main
// global.scss to see them on front end side.

// Helpers
@import 'helpers/typography';
@import 'helpers/grid';

// Variables
@import 'variables/colors';
@import 'variables/breakpoints';
@import 'variables/font-family';
@import 'variables/font-sizes';
@import 'variables/spacings';

// Gutenberg editor specific webfonts
@import 'gutenberg/variables/font-face';

// Components needed by gutenberg
@import 'components/button';
@import 'components/button-size-small';
@import 'components/button-size-medium';
@import 'components/button-size-large';
@import 'components/button-style-ghost';
@import 'components/link';

// Gutenberg layout outside blocks
@import 'gutenberg/layout/content';

// Gutenberg blocks
@import 'gutenberg/blocks';

// Gutenberg formatting
@import 'gutenberg/formatting';

// Editor exceptions below
// These styles are NO USE to front-end
.editor-styles-wrapper {
  overflow-x: hidden;
}

// Fix alignleft and alignright figcaption width
// Hack for achieving the same than in gutenberg-helpers.js
[data-align="right"] figcaption,
[data-align="left"] figcaption {
  margin-left: auto;
  margin-right: auto;

  // Hack for keeping figcaption from flowing over floated image, this variable is set inline to the corresponding figure with gutenberg-helpers.js
  /* stylelint-disable csstools/value-no-unknown-custom-properties */
  max-width: var(--width-child-img);
  text-align: center;
  /* stylelint-enable */
}

// Wider editor
// Default is 580px which is way too narrow
// Forced to use important here, because WordPress uses too specific selectors
/* stylelint-disable declaration-no-important */
.wp-block {
  font-family: $font-paragraphs !important;
  max-width: $width-max-article !important;

  // Full width block
  &[data-align="full"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  // Wide width block
  &[data-align="wide"] {
    max-width: $width-grid-base !important;
    width: 100% !important;

    @media (min-width: 870px) {
      padding-left: 0;
      padding-right: 0;
    }
  }
}