@use "sass:math";

// adduse

$list-style: decimal lower-alpha lower-roman;
$list-style-width: 1.2em;
$list-style-margin: 0.3em;
$list-style-outer-width: $list-style-margin + $list-style-width;
$max-indent: 9;
$resize-handle-size: 11px;
$touch-resize-handle-size: 15px;
$half-resize-handle-size: math.div($resize-handle-size, 2);
$half-touch-resize-handle-size: math.div($touch-resize-handle-size, 2);

$transparent-border: 1px solid transparent;

@function add-counter-reset($counter, $start: 1) {
  @if $counter > $start {
    @return add-counter-reset($counter - 1, $start) + " " + list-#{$counter};
  }

  @return list-#{$counter};
}

@function add-counter-set($counter, $start: 1) {
  @if $counter > $start {
    @return add-counter-set($counter - 1, $start) + " " + list-#{$counter} + " 0";
  }

  @return list-#{$counter} + " 0";
}

@mixin if-less-then-max-indent($value) {
  @if $value < $max-indent {
    li.ql-indent-#{$value} {
      counter-reset: add-counter-reset($max-indent, $value + 1);
    }
  }
}

@mixin add-indent-styles($counter) {
  @if $counter > 0 {
    @include add-indent-styles($counter - 1);

    .ql-indent-#{$counter} {
      padding-inline-start: 3 * $counter * 1em;
    }

    li.ql-indent-#{$counter} {
      padding-inline-start: 3 * $counter + $list-style-outer-width;
    }
  }
}

@mixin add-counter($counter) {
  @if $counter > 0 {
    @include add-counter($counter - 1);

    ol li[data-list=ordered].ql-indent-#{$counter} {
      counter-increment: list-#{$counter};

      &::before {
        content: counter(list-#{$counter}, nth($list-style, ($counter % 3) + 1)) ". ";
      }
    }

    @include if-less-then-max-indent($counter);
  }
}

.dx-htmleditor {
  display: flex;
  flex-direction: column;
  border: $transparent-border;

  &:not(.dx-state-disabled) {
    li[data-list="checked"],
    li[data-list="unchecked"] {
      cursor: pointer;
    }
  }
}

.dx-htmleditor-add-image-popup-with-tabs > .dx-overlay-content > .dx-popup-content {
  padding: 0;
}

.dx-htmleditor-hidden-content {
  display: none;
}

.dx-htmleditor-add-image-popup > .dx-overlay-content {
  > .dx-popup-content {
    .dx-multiview-wrapper {
      border-left-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
    }

    .dx-fix-ratio-container {
      .dx-textbox {
        display: inline-block;
      }

      .dx-buttongroup {
        vertical-align: top;
      }
    }

    .dx-fileuploader-wrapper {
      padding: 0;
    }

    .dx-fileuploader-upload-button {
      display: none;
    }
  }

  .dx-popup-title {
    border-bottom: 0;
  }
}

.dx-quill-container {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-basis: auto;
  min-height: 1px;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.ql-clipboard { // stylelint-disable-line selector-class-pattern
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;

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

.dx-htmleditor-content {
  box-sizing: border-box;
  line-height: 1.42;
  width: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  white-space: pre-wrap;
  word-wrap: break-word;

  .dx-variable {
    & > span {
      padding: 3px 6px;
      border-radius: 8px;
    }
  }

  > * {
    cursor: text;
  }

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

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  ul {
    counter-reset: add-counter-reset($max-indent);
  }

  table {
    border-collapse: collapse;
  }

  td,
  th {
    border: 1px solid #000;
    padding: 2px 5px;
  }

  ol {
    padding-inline-start: 1.5em;
    counter-reset: add-counter-reset($max-indent);
  }

  ul {
    padding-inline-start: 1.5em;
  }

  li {
    list-style-type: none;
    padding-inline-start: $list-style-outer-width;
    position: relative;

    &[data-list="bullet"]::before {
      content: '\2022';
    }

    &[data-list="checked"]::before {
      content: '\2611';
    }

    &[data-list="unchecked"]::before {
      content: '\2610';
    }

    &::before {
      display: inline-block;
      margin-inline-start: -1 * $list-style-outer-width;
      margin-inline-end: $list-style-margin;
      text-align: end;
      white-space: nowrap;
      width: $list-style-width;
    }

    > .ql-ui { // stylelint-disable-line selector-class-pattern
      visibility: hidden;
    }

    &[data-list="unchecked"],
    &[data-list="checked"] {
      > .ql-ui { // stylelint-disable-line selector-class-pattern
        visibility: visible;
      }
    }
  }

  li[data-list="ordered"] {
    counter-increment: list-0;

    &::before {
      content: counter(list-0, nth($list-style, 1)) ". ";
    }
  }

  li[data-list="ordered"]:not([class*="ql-indent"]) {
    counter-set: add-counter-set($max-indent);
  }

  @include add-counter($max-indent);
  @include add-indent-styles($max-indent);

  table { // stylelint-disable-line no-duplicate-selectors
    table-layout: fixed;
    width: 100%;

    td,
    th {
      outline: none;
    }
  }

  // stylelint-disable selector-class-pattern
  .ql-code-block-container {
    font-family: monospace;
  }

  code,
  .ql-code-block-container {
    background-color: rgba(191, 191, 191, 0.15);
  }

  .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-font-serif {
    font-family: "Georgia", "Times New Roman", serif;
  }

  .ql-font-monospace {
    font-family: "Monaco", "Courier New", monospace;
  }

  .ql-direction-rtl {
    direction: rtl;
    text-align: inherit;
  }

  &.ql-blank {
    &::before {
      color: rgba(0, 0, 0, 0.6);
      content: attr(data-placeholder);
      font-style: italic;
      left: 15px;
      pointer-events: none;
      position: absolute;
      right: 15px;
    }

    &::after {
      content: attr(data-placeholder);
      z-index: -1;
      visibility: hidden;
    }

    &[data-placeholder] > p {
      height: 0.1px;
    }
  }

  // stylelint-enable selector-class-pattern

  blockquote {
    padding-inline-start: 12px;
    border-inline-start: 4px solid;
  }
}

.dx-suggestion-list-wrapper {
  .dx-list {
    min-height: 35px;

    .dx-scrollable-content {
      margin: 0;
    }
  }
}

.dx-suggestion-list {
  min-width: 50px;

  .dx-list-item {
    display: block;
  }

  .dx-list-item-icon {
    border-radius: 50%;
    vertical-align: text-bottom;
  }
}

.dx-formdialog-form {
  min-width: 360px;
}

.dx-aidialog {
  .dx-toolbar-after .dx-toolbar-item:nth-last-child(2) {
    padding-inline-end: 0;
  }
}

.dx-aidialog-controls {
  display: flex;

  .dx-selectbox {
    flex: 1 0 0;
  }
}

.dx-aidialog-content {
  display: flex;
  flex-direction: column;
}

.dx-aidialog-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.dx-overlay-content {
  &.dx-popup-fullscreen {
    .dx-formdialog-form {
      min-width: 240px;
    }
  }
}

.dx-formdialog-field-target .dx-field-item-content {
  text-align: end;
}

.dx-color-format,
.dx-background-format {
  .dx-icon-color,
  .dx-icon-background {
    border-bottom: 3px solid transparent;
  }
}

.dx-htmleditor-toolbar-separator {
  border-left: $transparent-border;
}

.dx-htmleditor-toolbar-menu-separator {
  width: 100%;
  border-top: $transparent-border;

  &::before {
    content: none;
  }
}

.dx-resize-frame {
  position: absolute;
  box-sizing: content-box;
  border: 1px dashed lightslategrey;
  pointer-events: none;

  .dx-resizable-handle {
    pointer-events: auto;
  }

  .dx-resizable-handle-corner-top-right,
  .dx-resizable-handle-corner-top-left,
  .dx-resizable-handle-corner-bottom-right,
  .dx-resizable-handle-corner-bottom-left {
    border: 1px solid white;
    width: $resize-handle-size;
    height: $resize-handle-size;
    border-radius: 0;

    @at-root #{selector-append(".dx-touch-device", &)} {
      width: $touch-resize-handle-size;
      height: $touch-resize-handle-size;
    }
  }

  .dx-resizable-handle-corner-top-right,
  .dx-resizable-handle-corner-bottom-right {
    right: -$half-resize-handle-size;

    @at-root #{selector-append(".dx-touch-device", &)} {
      right: -$half-touch-resize-handle-size;
    }
  }

  .dx-resizable-handle-corner-top-left,
  .dx-resizable-handle-corner-bottom-left {
    left: -$half-resize-handle-size;

    @at-root #{selector-append(".dx-touch-device", &)} {
      left: -$half-touch-resize-handle-size;
    }
  }

  .dx-resizable-handle-corner-top-right,
  .dx-resizable-handle-corner-top-left {
    top: -$half-resize-handle-size;

    @at-root #{selector-append(".dx-touch-device", &)} {
      top: -$half-touch-resize-handle-size;
    }
  }

  .dx-resizable-handle-corner-bottom-right,
  .dx-resizable-handle-corner-bottom-left {
    bottom: -$half-resize-handle-size;

    @at-root #{selector-append(".dx-touch-device", &)} {
      bottom: -$half-touch-resize-handle-size;
    }
  }

  .dx-resizable-handle-right,
  .dx-resizable-handle-left,
  .dx-resizable-handle-top,
  .dx-resizable-handle-bottom {
    &::after {
      content: "";
      position: absolute;
      width: $resize-handle-size;
      height: $resize-handle-size;
      border: 1px solid white;

      @at-root #{selector-append(".dx-touch-device", &)} {
        width: $touch-resize-handle-size;
        height: $touch-resize-handle-size;
      }
    }
  }

  .dx-resizable-handle-right,
  .dx-resizable-handle-left {
    &::after {
      top: calc(50% - #{$half-resize-handle-size});

      @at-root #{selector-append(".dx-touch-device", &)} {
        top: calc(50% - #{$half-touch-resize-handle-size});
      }
    }
  }

  .dx-resizable-handle-top,
  .dx-resizable-handle-bottom {
    &::after {
      left: calc(50% - #{$half-resize-handle-size});

      @at-root #{selector-append(".dx-touch-device", &)} {
        left: calc(50% - #{$half-touch-resize-handle-size});
      }
    }
  }

  .dx-resizable-handle-right::after {
    right: -$half-resize-handle-size;

    @at-root #{selector-append(".dx-touch-device", &)} {
      right: -$half-touch-resize-handle-size;
    }
  }

  .dx-resizable-handle-left::after {
    left: -$half-resize-handle-size;

    @at-root #{selector-append(".dx-touch-device", &)} {
      left: -$half-touch-resize-handle-size;
    }
  }

  .dx-resizable-handle-top::after {
    top: -$half-resize-handle-size;

    @at-root #{selector-append(".dx-touch-device", &)} {
      top: -$half-touch-resize-handle-size;
    }
  }

  .dx-resizable-handle-bottom::after {
    bottom: -$half-resize-handle-size;

    @at-root #{selector-append(".dx-touch-device", &)} {
      bottom: -$half-touch-resize-handle-size;
    }
  }
}

.dx-mention {
  padding: 1px 0;
  border-radius: 2px;

  .dx-template-wrapper {
    white-space: nowrap;
    display: inline-block;
  }

  & > span {
    margin: 0 2px;
  }
}

.dx-table-resize-frame {
  position: absolute;
  pointer-events: none;

  > div {
    position: absolute;
    pointer-events: auto;
    background-color: transparent;
  }

  .dx-htmleditor-column-resizer {
    width: 5px;
    top: 0;
    height: 100%;
    cursor: col-resize;
  }

  .dx-htmleditor-highlighted-column {
    width: 3px;
    top: 0;
    height: 100%;
  }

  .dx-htmleditor-row-resizer {
    height: 5px;
    left: 0;
    width: 100%;
    cursor: row-resize;
  }

  .dx-htmleditor-highlighted-row {
    height: 3px;
    left: 0;
    width: 100%;
  }
}