@use "sass:math";
@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/diagram";
@use "../../base/diagram/mixins" as *;
@use "../button/colors" as *;
@use "../overlay/colors" as *;
@use "../accordion/colors" as *;
@use "../popup/colors" as *;
@use "../speedDialAction/sizes" as *;
@use "../fieldset/sizes" as *;
@use "../fieldset/sizes" as *;
@use "../menu/colors" as *;

// adduse

$material-diagram-toolbar-icon-size: $material-base-icon-size;
$diagram-toolbar-colorbutton-border-width: 3px;

$diagram-toolbox-title-size: 18px;


.dx-diagram {
  border-color: $diagram-border-color;

  // stylelint-disable selector-class-pattern
  .dxdi-control .dxdi-canvas {
    background-color: darken($overlay-content-bg, 15%);

    .selection-mark,
    .item-selection-rect,
    .item-multi-selection-rect,
    .items-selection-rect,
    .connector-side-mark,
    .connector-point-mark,
    .connector-selection,
    .connector-multi-selection,
    .extension-line path {
      stroke: $button-default-bg;
    }

    .connector-side-mark,
    .extension-line text {
      fill: $button-default-bg;
    }

    .container-target,
    .connection-target,
    .connection-mark:not(.selector),
    .connection-point:not(.selector) {
      stroke: $button-success-bg;
    }

    .connection-mark:not(.selector),
    .connection-point:not(.selector) {
      &.active {
        fill: $button-success-bg;
      }
    }

    .geometry-mark {
      stroke: $button-danger-bg;
    }

    .dxdi-main .dxdi-image {
      .dxdi-spinner {
        path {
          stroke: $diagram-image-icon-accent-color;
          stroke-opacity: 1;
        }

        ellipse {
          stroke: $diagram-image-icon-base-color;
          stroke-opacity: 0.5;
        }
      }

      .dxdi-user .dxdi-background {
        fill: $diagram-image-icon-base-color;
        opacity: 0.5;
      }

      .dxdi-warning {
        ellipse {
          fill: $base-danger;
        }
      }
    }
  }

  .dxdi-control:not(.focused) .dxdi-canvas {
    .selection-mark,
    .geometry-mark {
      stroke: #666;
    }

    .item-selection-rect,
    .items-selection-rect {
      fill: transparent;
      stroke: #666;
    }

    .items-selection-rect {
      fill: rgba(144, 144, 144, 0.02);
    }

    .item-multi-selection-rect {
      fill: rgba(144, 144, 144, 0.02);
      stroke: #666;
    }

    .connector-selection,
    .connector-multi-selection {
      stroke: #666;
    }

    .connector-point-mark,
    .connector-side-mark {
      stroke: #666;
    }

    .connector-side-mark {
      fill: #666;
    }
  }

  .dxdi-text-input-container.connector-text .dxdi-text-input {
    border-color: $button-default-bg;
  }

  // stylelint-enable selector-class-pattern

  .dx-diagram-toolbar-wrapper {
    border-bottom: 1px solid $diagram-toolbar-border-color;
  }


  &.dx-diagram-fullscreen {
    background-color: $base-bg;
  }
}

.dx-diagram-toolbox-panel,
.dx-diagram-properties-panel {
  background: $overlay-content-bg;
}

.dx-diagram-floating-toolbar-container {
  background: $overlay-content-bg;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.175);
  border-radius: $popup-border-radius;
  padding: 4px;

  .dx-toolbar .dx-toolbar-items-container {
    height: $diagram-floating-toolbar-items-height;

    .dx-texteditor {
      .dx-texteditor-input,
      .dx-placeholder::before {
        color: inherit;
        padding: $diagram-floating-toolbar-editor-padding;
      }

      .dx-button {
        width: auto;
        height: auto;
        min-width: 24px;
        min-height: 24px;
        margin: 2px;

        .dx-button-content {
          padding: $diagram-floating-toolbar-editor-button-padding;
        }
      }
    }
  }

  &.dx-diagram-properties-panel-toolbar-container {
    &,
    .dx-toolbar,
    .dx-toolbar-items-container,
    .dx-toolbar-item,
    .dx-button {
      width: $material-main-fa-button-size;
      height: $material-main-fa-button-size;

      .dx-button-content {
        padding-top: 0;
        padding-bottom: 0;
        line-height: $material-main-fa-button-size;
      }
    }
  }

  .dx-toolbar-item {
    padding: 0 4px 0 0;
  }
}

.dx-diagram-toolbox-popup {
  & > .dx-overlay-content {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.175);
  }

  .dx-popup-title {
    margin-bottom: 0;

    &.dx-toolbar {
      font-size: 0.8em;
      min-height: $diagram-toolbox-title-size;

      .dx-toolbar-items-container {
        height: $diagram-toolbox-title-size;
      }
    }

    .dx-button.dx-button-has-icon:not(.dx-button-has-text),
    .dx-button-content {
      width: $diagram-toolbox-title-size;
      height: $diagram-toolbox-title-size;
    }
  }

  .dx-popup-content {
    .dx-diagram-toolbox-input-container,
    .dx-diagram-toolbox-panel,
    .dx-diagram-toolbox-panel .dx-accordion {
      width: $diagram-toolbox-width;
    }
  }

  .dx-diagram-toolbox-input-container {
    border-bottom: 1px solid $accordion-item-border-color;
  }

  .dx-diagram-toolbox-input {
    margin: $diagram-toolbox-input-margin;

    .dx-texteditor-input,
    .dx-placeholder::before {
      padding: $diagram-toolbox-input-v-padding $diagram-toolbox-input-h-padding;
    }

    &.dx-editor-outlined {
      &:not(.dx-state-focused) {
        box-shadow: none;
      }

      .dx-texteditor-buttons-container:last-child > .dx-button:last-child {
        margin-right: 0;
      }
    }

    .dx-button {
      .dx-button-content {
        padding: $diagram-toolbox-input-image-padding;
      }

      .dx-icon {
        font-size: $diagram-toolbox-input-image-size;
      }
    }
  }

  .dx-popup-title .dx-closebutton {
    width: $diagram-toolbox-title-size;
    height: $diagram-toolbox-title-size;
    margin: 1px 0 0;
  }

  .dx-popup-title .dx-closebutton .dx-icon {
    width: 14px;
    height: 14px;
    padding: 2px;
    font-size: 12px;
    line-height: 12px;
    background-position: 2px 2px;
    background-size: 12px 12px;
  }

  &.dx-diagram-mobile-popup {
    .dx-popup-content {
      padding-top: $diagram-toolbox-mobile-padding;

      .dx-diagram-toolbox-input-container {
        border-top: 1px solid $accordion-item-border-color;
      }
    }
  }
}

.dx-diagram-toolbox-panel {
  .dx-accordion {
    margin: 0;

    .dx-accordion-item {
      border-left: none;
      border-right: none;
      border-bottom: 1px solid $accordion-item-border-color;
      border-top: none;
      box-shadow: none;
    }

    .dx-accordion-item-opened {
      margin: 0;
    }

    .dx-item-content.dx-accordion-item-title {
      min-height: 32px;
      padding-left: $diagram-toolbox-h-padding;
      padding-right: $diagram-toolbox-h-padding;

      .dx-accordion-item-title-caption {
        text-transform: uppercase;
      }

      &::before {
        inset-inline-end: $diagram-toolbox-h-padding;
      }
    }

    .dx-item-content.dx-accordion-item-body {
      padding: $diagram-toolbox-accordion-v-padding $diagram-toolbox-h-padding;
    }
  }

  .dxdi-toolbox .dxdi-canvas .dxdi-shape-text { // stylelint-disable-line selector-class-pattern
    opacity: $diagram-toolbox-shape-text-opacity;
  }
}

.dx-diagram-properties-popup {
  .dx-multiview-item,
  &.dx-diagram-properties-popup-notabs .dx-popup-content {
    padding: $diagram-properties-panel-padding;
  }

  .dx-diagram-properties-panel-group-title {
    text-transform: uppercase;
    padding: $diagram-properties-panel-spacing;
  }

  .dx-diagram-properties-panel-group-toolbar {
    padding: 0 $diagram-properties-panel-spacing $diagram-properties-panel-spacing;

    .dx-toolbar-item {
      margin-bottom: math.div($diagram-properties-panel-spacing, 2);

      .dx-button {
        height: auto;
      }

      &.dx-diagram-lg-icon-item .dx-diagram-i {
        background-size: $diagram-properties-layout-icon-size $diagram-properties-layout-icon-size;
        width: $diagram-properties-layout-icon-size;
        height: $diagram-properties-layout-icon-size;
      }
    }
  }

  .dx-diagram-properties-panel-group-toolbar:first-child {
    padding-top: $diagram-properties-panel-spacing;
  }

  &.dx-diagram-mobile-popup {
    .dx-popup-title {
      padding: 8px 8px 0 0;
    }

    .dx-tabpanel {
      .dx-tab-selected::before {
        top: 0;
        bottom: initial;
      }
    }
  }
}

.dx-diagram-toolbar {
  .dx-format-active:not(.dx-color-format):not(.dx-background-format) {
    background-color: $diagram-normal-format-active-bg;

    &.dx-button-success {
      background-color: $diagram-success-format-active-bg;
    }

    &.dx-button-default {
      background-color: $diagram-default-format-active-bg;
    }

    &.dx-button-danger {
      background-color: $diagram-danger-format-active-bg;
    }
  }

  .dx-texteditor.dx-editor-filled,
  .dx-dropdowneditor.dx-editor-filled {
    background-color: transparent;

    &::after {
      border-bottom-color: transparent;
    }
  }

  .dx-diagram-toolbar-separator {
    height: 50%;
    border-left-color: $diagram-toolbar-border-color;
  }

  .dx-diagram-toolbar-menu-separator {
    border-top-color: $diagram-toolbar-border-color;
  }

  .dx-diagram-toolbar-text {
    padding: $material-field-value-top-padding 0 $material-field-value-bottom-padding $material-field-labelvalue-spacing;
  }

  .dx-diagram-lg-edit-item .dx-texteditor {
    width: $diagram-large-editor-width;
  }

  .dx-diagram-md-edit-item .dx-texteditor {
    width: $diagram-medium-editor-width;
  }

  .dx-diagram-sm-edit-item .dx-texteditor {
    width: $diagram-small-editor-width;
  }

  .dx-diagram-color-edit-item .dx-dropdowneditor-field-before-template-wrapper {
    .dx-diagram-i,
    .dx-icon {
      border-bottom-width: $diagram-toolbar-colorbutton-border-width;
      border-bottom-style: solid;
    }
  }
}

.dx-diagram-toolbar,
.dx-dropdownmenu-popup {
  .dx-diagram-image-dropdown-item,
  .dx-diagram-color-edit-item {
    .dx-dropdowneditor-field-before-template-wrapper {
      .dx-diagram-i,
      .dx-icon {
        margin-left: 12px;
        margin-right: 12px;
      }

      .dx-icon {
        font-size: $material-diagram-toolbar-icon-size;
        color: $base-text-color;
      }
    }
  }
}

.dx-diagram-contextmenu.dx-context-menu {
  .dx-menu-item .dx-menu-item-content .dx-menu-item-popout-container {
    right: 0;
  }

  .dx-menu-no-icons > .dx-menu-item-wrapper > .dx-menu-item > .dx-menu-item-content .dx-menu-item-text {
    padding-left: 4px;
  }
}

.dx-diagram-touchbar {
  .dx-menu-item .dx-menu-item-content {
    padding: $diagram-touchbar-item-padding;
  }

  .dx-menu-separator {
    width: 1px;
    height: $material-diagram-toolbar-icon-size + $diagram-touchbar-item-padding + $diagram-touchbar-item-padding + 2;
    margin: 0;
  }
}

@include diagram-action-icons-mixin($base-text-color, $base-text-color, $material-diagram-toolbar-icon-size, $diagram-toolbar-colorbutton-border-width);

.dx-diagram-toolbox-popup .dx-button-has-icon .dx-icon.dx-icon-diagram-toolbox-drag {
  @include diagram-icon-colored(url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22_x31_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2012%2012%22%20style%3D%22enable-background%3Anew%200%200%2012%2012%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0D%0A%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%20%7D%0D%0A%3C%2Fstyle%3E%0D%0A%3Cg%20id%3D%22_x32_%22%3E%0D%0A%09%3Cg%3E%0D%0A%09%09%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2C8h1V3H0V8z%20M2%2C8h1V3H2V8z%20M4%2C8h1V3H4V8z%20M6%2C8h1V3H6V8z%20M8%2C8h1V3H8V8z%20M10%2C3v5h1V3H10z%22%20fill%3D%22currentColor%22%20%2F%3E%0D%0A%09%3C%2Fg%3E%0D%0A%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E%0D%0A"), $popup-title-color, $diagram-toolbox-title-size, $diagram-toolbox-title-size);

  line-height: $diagram-toolbox-title-size;
  background-size: $diagram-toolbox-title-size $diagram-toolbox-title-size;
}

.dx-diagram-i-button-properties-panel-open {
  @include diagram-icon-colored(url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22_x31_%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2018%2018%22%20style%3D%22enable-background%3Anew%200%200%2018%2018%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0D%0A%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%7D%0D%0A%09.st1%7Bopacity%3A0.35%3Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Benable-background%3Anew%20%20%20%20%3B%7D%0D%0A%3C%2Fstyle%3E%0D%0A%3Cpath%20id%3D%22_x33_%22%20class%3D%22st0%22%20d%3D%22M17.8%2C10.3l-1%2C1l-2.1-2.1l1-1C15.8%2C8.1%2C15.9%2C8%2C16.1%2C8c0.1%2C0%2C0.3%2C0.1%2C0.4%2C0.2l1.3%2C1.3%0D%0A%09C18%2C9.7%2C18%2C10.1%2C17.8%2C10.3z%20M14%2C2H4v13h2v2H4c-1.1%2C0-2-0.9-2-2V2c0-1.1%2C0.9-2%2C2-2h10c1.1%2C0%2C2%2C0.9%2C2%2C2v3l-2%2C2V2z%20M16.1%2C11.9l-6%2C6.1H8%0D%0A%09v-2.1l6.1-6.1L16.1%2C11.9z%22%20fill%3D%22currentColor%22%2F%3E%0D%0A%3Cpath%20id%3D%22_x32_%22%20class%3D%22st1%22%20d%3D%22M5%2C3h8v5l-6%2C6H5V3z%22%20fill%3D%22currentColor%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A"), $button-default-color, $material-diagram-toolbar-icon-size, $material-diagram-toolbar-icon-size);
}