/* The same rules render paragraph layout in Draftail and on the site. */
body :is([data-text-align="left"], .rich-text-align-left) {
  text-align: left;
}

body :is([data-text-align="center"], .rich-text-align-center) {
  text-align: center;
}

body :is([data-text-align="right"], .rich-text-align-right) {
  text-align: right;
}

body
  :is(
    [data-text-indent],
    .rich-text-indent-1,
    .rich-text-indent-2,
    .rich-text-indent-3,
    .rich-text-indent-4
  ) {
  --rich-text-indent-step: min(2rem, 5vw);
  margin-inline-start: calc(
    var(--rich-text-indent-level, 0) * var(--rich-text-indent-step)
  );
}

:is([data-text-indent="1"], .rich-text-indent-1) {
  --rich-text-indent-level: 1;
}
:is([data-text-indent="2"], .rich-text-indent-2) {
  --rich-text-indent-level: 2;
}
:is([data-text-indent="3"], .rich-text-indent-3) {
  --rich-text-indent-level: 3;
}
:is([data-text-indent="4"], .rich-text-indent-4) {
  --rich-text-indent-level: 4;
}

/* Accent headings keep the EASM styling and use a scale by heading level. */
body :is(h1, h2, h3, h4, h5, h6)[data-heading-style="accent"],
body .Draftail-Editor .rich-text-heading-accent {
  color: var(--easm-accent, var(--editor-text-green, #07e8bd));
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  margin-block: 0 1.2rem;
  padding-block: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

body h3[data-heading-style="accent"],
body .Draftail-Editor h3.rich-text-heading-accent {
  font-size: clamp(1.75rem, 3.125vw, 2.5rem);
}

body h4[data-heading-style="accent"],
body .Draftail-Editor h4.rich-text-heading-accent {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

body :is(h1, h2, h3, h4, h5, h6)[data-heading-style="accent"]::before {
  content: none;
}