html {
  /*
   * This sets up the initial counter values to `0`.
   * For now, `ParagraphNodeSpec` only allows 7 indentation levels
   * (src/ParagraphNodeSpec.js) so this defines 7 variables.
   */
  counter-reset:
    czi-counter-0 czi-counter-1 czi-counter-2 czi-counter-3
    czi-counter-4 czi-counter-5 czi-counter-6 czi-counter-7;
}

/* For MS-Edge 16+, Chrome, Safari, Firefox */
.ProseMirror ol {
  --czi-counter-name: czi-counter-0;
  --czi-list-style-type: decimal;
  --czi-counter-reset: 0;

  counter-reset: none;
}

.ProseMirror ol > li {
  counter-increment: var(--czi-counter-name);
}

.ProseMirror ol:not([data-counter-reset='none']) {
  counter-reset: var(--czi-counter-name) var(--czi-counter-reset);
}

.ProseMirror ol[data-counter-reset='none'] {
  counter-reset: none;
}

.ProseMirror ol > li::before {
  /*
   * Note that this CSS Rule will not work in MS-Edge 15:
   * - MS-Edge 15 does not supported using CSS variable isnide pseudo element
   *   https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11495448/
   * - MS-Edge 15 does not supported nested CSS fucntions.
   *   https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/18936010/
   * In order to support MS-Edge 15, we'd have to use extra rules.
   * See the section "MS-Edge 15 Rules" below.
   */
  content: counter(var(--czi-counter-name), var(--czi-list-style-type)) '. ';
}

/**
 * MS-Edge 15 Rules Section ****************************************************
 * This section is included to support MS-Edge 15. Consider removing this
 * section if MS-Edge 15  support is no longer not needed.
 * The CSS below are generated manually by using the online SASS conversion tool
 * https://www.sassmeister.com/ with the SASS snippet copied from
 * from https://gist.github.com/hedgerwang/4ce101d39b9f7d9c99b0518add7a11c4
 */

.ProseMirror ol[type='decimal'][data-indent='0'] > li::before {
  content: counter(czi-counter-0, decimal) '. ';
}

.ProseMirror ol[type='decimal'][data-indent='1'] > li::before {
  content: counter(czi-counter-1, decimal) '. ';
}

.ProseMirror ol[type='decimal'][data-indent='2'] > li::before {
  content: counter(czi-counter-2, decimal) '. ';
}

.ProseMirror ol[type='decimal'][data-indent='3'] > li::before {
  content: counter(czi-counter-3, decimal) '. ';
}

.ProseMirror ol[type='decimal'][data-indent='4'] > li::before {
  content: counter(czi-counter-4, decimal) '. ';
}

.ProseMirror ol[type='decimal'][data-indent='5'] > li::before {
  content: counter(czi-counter-5, decimal) '. ';
}

.ProseMirror ol[type='decimal'][data-indent='6'] > li::before {
  content: counter(czi-counter-6, decimal) '. ';
}

.ProseMirror ol[type='lower-alpha'][data-indent='0'] > li::before {
  content: counter(czi-counter-0, lower-alpha) '. ';
}

.ProseMirror ol[type='lower-alpha'][data-indent='1'] > li::before {
  content: counter(czi-counter-1, lower-alpha) '. ';
}

.ProseMirror ol[type='lower-alpha'][data-indent='2'] > li::before {
  content: counter(czi-counter-2, lower-alpha) '. ';
}

.ProseMirror ol[type='lower-alpha'][data-indent='3'] > li::before {
  content: counter(czi-counter-3, lower-alpha) '. ';
}

.ProseMirror ol[type='lower-alpha'][data-indent='4'] > li::before {
  content: counter(czi-counter-4, lower-alpha) '. ';
}

.ProseMirror ol[type='lower-alpha'][data-indent='5'] > li::before {
  content: counter(czi-counter-5, lower-alpha) '. ';
}

.ProseMirror ol[type='lower-alpha'][data-indent='6'] > li::before {
  content: counter(czi-counter-6, lower-alpha) '. ';
}

.ProseMirror ol[type='lower-roman'][data-indent='0'] > li::before {
  content: counter(czi-counter-0, lower-roman) '. ';
}

.ProseMirror ol[type='lower-roman'][data-indent='1'] > li::before {
  content: counter(czi-counter-1, lower-roman) '. ';
}

.ProseMirror ol[type='lower-roman'][data-indent='2'] > li::before {
  content: counter(czi-counter-2, lower-roman) '. ';
}

.ProseMirror ol[type='lower-roman'][data-indent='3'] > li::before {
  content: counter(czi-counter-3, lower-roman) '. ';
}

.ProseMirror ol[type='lower-roman'][data-indent='4'] > li::before {
  content: counter(czi-counter-4, lower-roman) '. ';
}

.ProseMirror ol[type='lower-roman'][data-indent='5'] > li::before {
  content: counter(czi-counter-5, lower-roman) '. ';
}

.ProseMirror ol[type='lower-roman'][data-indent='6'] > li::before {
  content: counter(czi-counter-6, lower-roman) '. ';
}
