@import './czi-vars.css';
@import './czi-bullet-list.css';
@import './czi-ordered-list.css';

/* List Styles */

/* https://css-tricks.com/custom-list-number-styling/ */

.ProseMirror ol,
.ProseMirror ul {
  /*
   * Use `column-span: all` and `display: flow-root` to force formatting context
   * https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
   */
  column-span: all;
  counter-reset: none;
  display: flow-root;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.ProseMirror li {
  --czi-list-font-size: 0.95em;
  --czi-list-style-color: initial;

  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  zoom: 1;
}

.ProseMirror li > p {
  flex: 1;
  margin: 0;
}

/* generic styles for custom list style type. */

/* see https://css-tricks.com/numbering-in-style/ */
.ProseMirror li::before {
  box-sizing: border-box;
  color: var(--czi-list-style-color);
  content: '';
  display: block;
  font-size: var(--czi-list-style-font-size);
  line-height: 120%;
  position: relative;
  text-align: right;
  top: 0.1em;
  min-width: 24pt;
}
