// 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/spacings';

// Gutenberg editor style specific variables
@import 'gutenberg/variables/fonts';

// 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';

// Gutenberg blocks
@import 'gutenberg/boxed';
@import 'gutenberg/button';
@import 'gutenberg/button-file';

// 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;
  max-width: 200px;
  text-align: center;
}

// 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;

  &:not([data-align="wide"]),
  &:not([data-align="full"]) {
    max-width: $width-max-article !important;
  }
}