@import './skiff-vars.css';

.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-block-end: 0;
  margin-block-start: 0;
  margin: 0;
  padding: 0;
}

/* bullet indentation */
.ProseMirror li {
  /* This assumes the space needed for 3 digits numbers */
  display: block;
  list-style-type: none;
  margin: 0;
  margin-top: 0;
  padding: 0;
  position: relative;
  zoom: 1;
}

.ProseMirror ul:not(.collapsable-toggle-list):not(.todo-list) li,
.ProseMirror ol:not(.collapsable-toggle-list):not(.todo-list) li {
  margin-bottom: 7px;
}

li > p {
  margin: 0;
}

.ProseMirror li > p {
  margin: 0;
  margin-block-end: 0;
  margin-block-start: 0;
  padding-left: 36pt;
  margin-left: -12pt;
}

/* https://css-tricks.com/numbering-in-style/ */
.ProseMirror ul li > p::before {
  display: inline;
  color: var(--skiff-list-style-color);
  font-size: calc(var(--skiff-list-style-font-size, 13pt) / 3);
  content: '\25CF';
  line-height: 1em;
  position: relative;
  text-align: right;
  top: calc(-1 * var(--skiff-list-style-font-size, 13pt) / 6);
  left: -12px;
  margin-left: -10px;
  margin-right: 6px;
  width: 24pt;
}

.ProseMirror ul.todo-list.checked li > p::before {
  content: '\d83dddf9';
}

.ProseMirror ol {
  /* counter-reset: skiff-counter;
  list-style-type: none; */
  --skiff-counter-name: skiff-counter-0;
  --skiff-list-style-type: decimal;
  --skiff-counter-reset: 0;

  counter-reset: none;
}

/* [FS] IRAD-947 2020-05-26
Bullet list type changing fix */

/* prettier-ignore */
.ProseMirror ul[data-indent='7'] li > p::before,
/* prettier-ignore */
.ProseMirror ul[data-indent='4'] li > p::before,
/* prettier-ignore */
.ProseMirror ul[data-indent='1'] li > p::before {
  content: '\25cb'; /* circle */
}

/* prettier-ignore */
.ProseMirror ul[data-indent='5'] li > p::before,
/* prettier-ignore */
.ProseMirror ul[data-indent='2'] li > p::before {
  content: '\25a0'; /* square */
}

.ProseMirror ul[data-indent='6'] li > p::before,
.ProseMirror ul[data-indent='3'] li > p::before,
.ProseMirror ul[data-indent='0'] li > p::before {
  content: '\25CF'; /* circle */
}

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

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

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

.ProseMirror ol > li > p::before {
  color: var(--skiff-list-style-color);
  display: inline-block;
  font-size: var(--skiff-list-style-font-size);
  line-height: 1em;
  position: relative;
  text-align: right;
  top: 0;
  left: -5px;
  margin-left: -24pt;
  width: 24pt;
}

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* todo-list */
.list-task {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  zoom: 1;
  margin-bottom: 7px !important;
}

.list-task p {
  margin: 0;
  margin-block-end: 0;
  margin-block-start: 0;
  margin-left: -13pt !important;
  padding-left: calc(49px + max(var(--padding-offset, 0px), 0px)) !important;
}

.task-checkbox {
  position: absolute;
  left: 7px;
  width: 15px;
  height: calc(2 * var(--check-box-size, 12px));
  background: transparent;
  padding: 0px;
  z-index: 10;
  cursor: pointer;
  opacity: 0.7;
  border: none;
  padding: 0px;
  align-self: center;
  display: flex;
  align-items: center;
  filter: var(--filter-dark-icon);
}

.task-checkbox .check-box-icon {
  width: var(--check-box-size, 16px);
  height: var(--check-box-size, 16px);
}

.task-checkbox:hover {
  opacity: 1;
}

.list-task.checked span p {
  caret-color: var(--text-primary);
  text-decoration: line-through var(--text-primary);
  -webkit-text-decoration: line-through var(--text-primary);
  opacity: 0.6;
}