// Styles necessary for Quill

$LIST_STYLE: (decimal, lower-alpha, lower-roman) !default;
$LIST_STYLE_WIDTH: 1.2em !default;
$LIST_STYLE_MARGIN: 0.3em !default;
$LIST_STYLE_OUTER_WIDTH: $LIST_STYLE_MARGIN + $LIST_STYLE_WIDTH !default;
$MAX_INDENT: 9 !default;

@function resets($from, $to) {
  $list: (unquote('')); // sass wont allow empty "()" property list

  @for $num from $from through $to {
    $list: append($list, unquote('list-' + $num), space);
  }

  @return $list;
}

.ql-container {
  box-sizing: border-box;
  // font-family: Helvetica, Arial, sans-serif;
  // font-size: 13px;
  height: 100%;
  margin: 0px;
  position: relative;
}

.ql-container.ql-disabled {
  .ql-tooltip {
    visibility: hidden;
  }
}

.ql-container:not(.ql-disabled) {
  li[data-list='checked'],
  li[data-list='unchecked'] {
    > .ql-ui {
      cursor: pointer;
    }
  }
}

.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;

  p {
    margin: 0;
    padding: 0;
  }
}

.ql-editor {
  box-sizing: border-box;
  counter-reset: resets(0, $MAX_INDENT);
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.ql-editor, .quill-render {
  > * {
    cursor: text;
  }

  // p,
  // ol,
  // pre,
  // blockquote,
  // h1,
  // h2,
  // h3,
  // h4,
  // h5,
  // h6 {
  //   margin: 0;
  //   padding: 0;
  // }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @supports (counter-set: none) {
      counter-set: resets(0, $MAX_INDENT);
    }
    @supports not (counter-set: none) {
      counter-reset: resets(0, $MAX_INDENT);
    }
  }

  table {
    @extend .table;
    @extend .table-bordered;
    @extend .table-sm;
  }


  ol {
    padding-left: 1.5em;
  }

  li {
    list-style-type: none;
    padding-left: $LIST_STYLE_OUTER_WIDTH;
    position: relative;

    > .ql-ui:before {
      display: inline-block;
      margin-left: -1 * $LIST_STYLE_OUTER_WIDTH;
      margin-right: $LIST_STYLE_MARGIN;
      text-align: right;
      white-space: nowrap;
      width: $LIST_STYLE_WIDTH;
    }
  }

  li[data-list='checked'],
  li[data-list='unchecked'] {
    > .ql-ui {
      color: #777;
    }
  }

  li[data-list='bullet'] > .ql-ui:before {
    content: '\2022';
  }

  li[data-list='checked'] > .ql-ui:before {
    content: '\2611';
  }

  li[data-list='unchecked'] > .ql-ui:before {
    content: '\2610';
  }

  li[data-list] {
    @supports (counter-set: none) {
      counter-set: resets(1, $MAX_INDENT);
    }
    @supports not (counter-set: none) {
      counter-reset: resets(1, $MAX_INDENT);
    }
  }

  li[data-list='ordered'] {
    counter-increment: list-0;
    > .ql-ui:before {
      content: unquote('counter(list-0, ' + nth($LIST_STYLE, 1) + ')') '. '; // indexs stars with 1
    }
  }

  @for $num from 1 through $MAX_INDENT {
    li[data-list='ordered'].ql-indent-#{$num} {
      counter-increment: unquote('list-' + $num);

      > .ql-ui:before {
        content: unquote(
            'counter(list-' + $num + ', ' + nth($LIST_STYLE, 1 + ($num % 3)) + ')'
          )
          '. ';
      }
    }
    
    @if $num < $MAX_INDENT {
      li[data-list].ql-indent-#{$num} {
        @supports (counter-set: none) {
          counter-set: resets(($num + 1), $MAX_INDENT);
        }
        @supports not (counter-set: none) {
          counter-reset: resets(($num + 1), $MAX_INDENT);
        }
      }
    }
  }

  @for $num from 1 through $MAX_INDENT {
    .ql-indent-#{$num}:not(.ql-direction-rtl) {
      padding-left: #{3 * $num}em;
    }
    li.ql-indent-#{$num}:not(.ql-direction-rtl) {
      padding-left: #{(3 * $num + $LIST_STYLE_OUTER_WIDTH)};
    }
    .ql-indent-#{$num}.ql-direction-rtl.ql-align-right {
      padding-right: #{(3 * $num)}em;
    }
    li.ql-indent-#{$num}.ql-direction-rtl.ql-align-right {
      padding-right: #{(3 * $num + $LIST_STYLE_OUTER_WIDTH)};
    }
  }

  li.ql-direction-rtl {
    padding-right: $LIST_STYLE_OUTER_WIDTH;

    > .ql-ui:before {
      margin-left: $LIST_STYLE_MARGIN;
      margin-right: -1 * $LIST_STYLE_OUTER_WIDTH;
      text-align: left;
    }
  }

  table {
    table-layout: fixed;
    width: 100%;

    td {
      outline: none;
    }
  }

  .ql-code-block-container {
    font-family: monospace;
  }

  .ql-video {
    display: block;
    max-width: 100%;
  }

  .ql-video.ql-align-center {
    margin: 0 auto;
  }
  .ql-video.ql-align-right {
    margin: 0 0 0 auto;
  }
  .ql-bg-black {
    background-color: rgb(0, 0, 0);
  }
  .ql-bg-red {
    background-color: rgb(230, 0, 0);
  }
  .ql-bg-orange {
    background-color: rgb(255, 153, 0);
  }
  .ql-bg-yellow {
    background-color: rgb(255, 255, 0);
  }
  .ql-bg-green {
    background-color: rgb(0, 138, 0);
  }
  .ql-bg-blue {
    background-color: rgb(0, 102, 204);
  }
  .ql-bg-purple {
    background-color: rgb(153, 51, 255);
  }
  .ql-color-white {
    color: rgb(255, 255, 255);
  }
  .ql-color-red {
    color: rgb(230, 0, 0);
  }
  .ql-color-orange {
    color: rgb(255, 153, 0);
  }
  .ql-color-yellow {
    color: rgb(255, 255, 0);
  }
  .ql-color-green {
    color: rgb(0, 138, 0);
  }
  .ql-color-blue {
    color: rgb(0, 102, 204);
  }
  .ql-color-purple {
    color: rgb(153, 51, 255);
  }
  .ql-font-serif {
    font-family: Georgia, Times New Roman, serif;
  }
  .ql-font-monospace {
    font-family: Monaco, Courier New, monospace;
  }
  .ql-size-small {
    font-size: 0.75em;
  }
  .ql-size-large {
    font-size: 1.5em;
  }
  .ql-size-huge {
    font-size: 2.5em;
  }
  .ql-direction-rtl {
    direction: rtl;
    text-align: inherit;
  }
  .ql-align-center {
    text-align: center;
  }
  .ql-align-justify {
    text-align: justify;
  }
  .ql-align-right { 
    text-align: right;
  }
  .ql-ui {
    position: absolute;
  }
}