:root {
  --text-formatted-max-width: 72ch;
}

/* Issue: elements won't get styles without the actual class */
.block-help {
  @apply text-formatted;
}

/* Formatted typography. */
.text-formatted :not(.embedded-entity) {
  overflow-wrap: break-word; /* Prevent long word overflow */

  /* Apply to elements not in embedded entities */
  /* TODO: Add other nested content */
  :where(ol,ul):not(.embedded-entity *) {
    :is(ol) {
      @apply list-decimal;
    }
    :is(ul) {
      @apply list-disc;
    }
  }

  p {
    @apply max-w-[var(--text-formatted-max-width)] mb-4;
  }

  figure, ol, ul {
    @apply mb-4;

    ol, ul {
      @apply mb-0; /* No margin bottom on nested lists */
    }
  }

  h3 {
    @apply italic;
  }

  iframe {
    @apply my-4;
  }

  pre code {
    @screen lt-md {
      font-size: 13px;
    }
  }

  /* Clear after aligned elements */
  .align-left, .align-center, .align-right, /* Classes in front end */
  .drupal-media-style-align-left, /* Classes inside ckeditor */
  .drupal-media-style-align-right,
  .drupal-media-style-align-center {
    & + * {
      @apply clear-both;
    }
  }
}

/* Suppress top/bottom margin on first/last element. */
.text-formatted .field__item > :first-child {
  margin-top: 0;
}
.text-formatted .field__item > :last-child {
  margin-bottom: 0;
}

/* Reduce margin inside blockquote. */
.text-formatted blockquote p {
  margin: .5rem 0;
}

/* Formatted text field */
.field.text-formatted {
  margin-bottom: 1.5rem;
  line-height: 1.5;
}