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

// Set root size for rems
:root {
  /* stylelint-disable-next-line */
  font-size: 62.5%;
}

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

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

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

// Components needed by gutenberg
@import 'components/components';

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

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

// Apply general styles from site front-end
@import 'layout/general';

// Editor exceptions below
// These styles are NO USE to front-end
// Need to be right after general, because after typography comes block styles
.editor-styles-wrapper {
  @import 'layout/typography';
  overflow-x: hidden;
}

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

// Global features needed by editor
@import 'features/lazyload';

// 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 */
}

// Default editor blocks
.wp-block {
  font-family: var(--font-paragraph);

  // Let's use maximum article width on article content
  max-width: $width-max-article;

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

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

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

// Allow ACF blocks to be full width by default
/* stylelint-disable */
.wp-block[data-type^=acf] {
  max-width: 100%;
}

// Reset admin lists
.edit-post-layout__metaboxes ul,
.edit-post-layout__metaboxes ol,
.wp-admin .edit-post-sidebar ul,
.wp-admin .edit-post-sidebar ol {
  list-style: none;
  padding-left: 0;
}