// 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.
:root {
  // Set root size for rems so that 1rem = 10px
  // stylelint-disable-next-line declaration-property-unit-allowed-list
  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-size';
@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';

// Use only this from _accessibility.scss in the editor
%screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  // doiuse-disable
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

// 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 typography related styles inside blocks
  @import 'layout/typography';

  // Import gravity forms inside Gutenberg editor
  @import 'features/gravity-forms';

  // Prevent horizontal scrolling
  overflow-x: hidden;

  // Use ACF defined font styles in ACF fields
  .acf-fields *[class^='acf-'],
  .acf-fields [class^='acf-'] *:not(.mce-ico) {
    font-family: inherit;
    font-size: unset;
  }

  // We have to force buttons and some form styles for Gutenberg editor
  .block {
    .button,
    input[type="submit"] {
      @include button();
    }

    .button.button-ghost {
      @include button-style-ghost();
    }
  }

  .block-form {
    @import 'layout/forms';
  }
}

// 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-next-line csstools/value-no-unknown-custom-properties
  max-width: var(--width-child-img);
  text-align: center;
}

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

  // Reset 28px gap that comes from wp-includes/css/dist/edit-post/classic.css
  margin-bottom: 0;
  margin-top: 0;

  // 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-next-line selector-attribute-quotes
.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;
}