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


$GENERIC_DIAGRAM_TOOLBAR_ICON_SIZE: $GENERIC_BASE_ICON_SIZE;
$DIAGRAM_TOOLBAR_COLORBUTTON_BORDER_WIDTH: 3px;
$DIAGRAM_TOUCHBAR_ITEM_PADDING: 5px;

$DIAGRAM_TOOLBOX_TITLE_SIZE: 12px;


.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.55;
        }
      }

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

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

  .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 {
  border: 1px solid $overlay-border-color;
  background: $overlay-content-bg;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.175);
  border-radius: $popup-border-radius;
  padding: 2px;

  &.dx-diagram-properties-panel-toolbar-container {
    &,
    .dx-toolbar,
    .dx-toolbar-items-container,
    .dx-toolbar-item,
    .dx-button {
      width: $GENERIC_MAIN_FA_BUTTON_SIZE;
      height: $GENERIC_MAIN_FA_BUTTON_SIZE;

      .dx-button-content {
        padding-top: 0;
        padding-bottom: 0;
        line-height: $GENERIC_MAIN_FA_BUTTON_SIZE - 4px;
      }
    }
  }

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

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

  .dx-popup-title {
    &.dx-toolbar {
      font-size: 0.5em;
      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-accordion {
    width: $DIAGRAM_TOOLBOX_WIDTH;
  }

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

  .dx-diagram-toolbox-input {
    width: $DIAGRAM_TOOLBOX_WIDTH - 2 * $DIAGRAM_TOOLBOX_INPUT_MARGIN;
    margin: $DIAGRAM_TOOLBOX_INPUT_MARGIN;
    box-shadow: none;

    .dx-texteditor-input,
    .dx-placeholder:before {
      padding: $DIAGRAM_TOOLBOX_INPUT_V_PADDING $DIAGRAM_TOOLBOX_INPUT_H_PADDING;
    }

    .dx-button .dx-button-content {
      padding: 2px;
    }

    .dx-button .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: 10px;
    height: 10px;
    padding: 1px;
    font-size: 8px;
    line-height: 8px;
    background-position: 1px 1px;
    background-size: 8px 8px;
  }

  &.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 {
    .dx-accordion-item {
      border-left: none;
      border-right: none;

      &:first-of-type {
        border-top: none;
      }
    }
  }

  .dx-item-content.dx-accordion-item-title {
    padding: $DIAGRAM_TOOLBOX_ACCORDION_V_PADDING $DIAGRAM_TOOLBOX_H_PADDING;

    .dx-accordion-item-title-caption {
      font-size: 0.7em;
      font-weight: bold;
    }

    &::before {
      font-size: 0.7em;
      line-height: 1.5em;
    }
  }

  .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 {
    font-weight: bold;
    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: $DIAGRAM_PROPERTIES_PANEL_SPACING / 2;

      &.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: 2px 8px 0 0;
    }

    .dx-tabpanel {
      .dx-tab-selected:before {
        top: -1px;
      }
    }
  }
}

.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;
  }

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

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

  .dx-diagram-toolbar-text {
    padding: $GENERIC_FIELD_VALUE_TOP_PADDING 0 $GENERIC_FIELD_VALUE_BOTTOM_PADDING $GENERIC_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-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-template-wrapper {
      .dx-diagram-i,
      .dx-icon {
        margin-left: 8px;
        margin-right: 7px;
      }

      .dx-icon {
        font-size: $GENERIC_DIAGRAM_TOOLBAR_ICON_SIZE;
        color: $base-icon-color;
      }
    }
  }
}

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

  .dx-menu-separator {
    width: 1px;
    height: $GENERIC_BASE_ICON_SIZE + $DIAGRAM_TOUCHBAR_ITEM_PADDING + $DIAGRAM_TOUCHBAR_ITEM_PADDING + 2;
    margin: 0;
  }
}

@include diagram-action-icons-mixin($base-icon-color, $menu-color, $GENERIC_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%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%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%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%20%7D%0A%3C%2Fstyle%3E%0A%3Cg%20id%3D%22_x32_%22%3E%0A%09%3Cg%3E%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%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%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%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%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%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%7D%0A%09.st1%7Bopacity%3A0.35%3Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Benable-background%3Anew%20%20%20%20%3B%7D%0A%3C%2Fstyle%3E%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%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%0A%09v-2.1l6.1-6.1L16.1%2C11.9z%22%20fill%3D%22currentColor%22%2F%3E%0A%3Cpath%20id%3D%22_x32_%22%20class%3D%22st1%22%20d%3D%22M5%2C3h8v5l-6%2C6H5V3z%22%20fill%3D%22currentColor%22%2F%3E%0A%3C%2Fsvg%3E%0A"), $button-default-color, $GENERIC_DIAGRAM_TOOLBAR_ICON_SIZE, $GENERIC_DIAGRAM_TOOLBAR_ICON_SIZE);
}
