devextreme-themebuilder 26.1.2-beta → 26.1.3

package/data/scss/widgets/fluent/diagram/_index.scss

@@ -1,480 +1,480 @@
-@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
-
-$fluent-diagram-toolbar-icon-size: $fluent-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: color.adjust($overlay-content-bg, $lightness: -15%, $space: hsl);
-
-    .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;
-    border-bottom-color: $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 color.change($base-shadow-color, $alpha: 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: $fluent-main-fa-button-size;
-      height: $fluent-main-fa-button-size;
-
-      .dx-button-content {
-        padding-top: 0;
-        padding-bottom: 0;
-        line-height: $fluent-main-fa-button-size;
-      }
-    }
-  }
-
-  .dx-toolbar-item {
-    padding: 0 4px 0 0;
-  }
-}
-
-.dx-diagram-toolbox-popup {
-  & > .dx-overlay-content {
-    box-shadow: 0 1px 8px color.change($base-shadow-color, $alpha: 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 transparent;
-  }
-
-  .dx-diagram-toolbox-input {
-    margin: $diagram-toolbox-input-margin;
-
-    &.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 transparent;
-      }
-    }
-  }
-}
-
-.dx-diagram-toolbox-panel {
-  .dx-accordion {
-    margin: 0;
-
-    .dx-accordion-item {
-      border-left: none;
-      border-right: none;
-      border-bottom: 1px solid transparent;
-      border-top: none;
-      box-shadow: none;
-    }
-
-    .dx-accordion-item-opened {
-      margin: 0;
-    }
-
-    .dx-item-content.dx-accordion-item-title {
-      min-height: 32px;
-    }
-
-    .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: $fluent-field-value-top-padding 0 $fluent-field-value-bottom-padding $fluent-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: $fluent-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: $fluent-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, $fluent-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, $fluent-diagram-toolbar-icon-size, $fluent-diagram-toolbar-icon-size);
-}
+@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
+
+$fluent-diagram-toolbar-icon-size: $fluent-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: color.adjust($overlay-content-bg, $lightness: -15%, $space: hsl);
+
+    .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;
+    border-bottom-color: $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 color.change($base-shadow-color, $alpha: 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: $fluent-main-fa-button-size;
+      height: $fluent-main-fa-button-size;
+
+      .dx-button-content {
+        padding-top: 0;
+        padding-bottom: 0;
+        line-height: $fluent-main-fa-button-size;
+      }
+    }
+  }
+
+  .dx-toolbar-item {
+    padding: 0 4px 0 0;
+  }
+}
+
+.dx-diagram-toolbox-popup {
+  & > .dx-overlay-content {
+    box-shadow: 0 1px 8px color.change($base-shadow-color, $alpha: 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 transparent;
+  }
+
+  .dx-diagram-toolbox-input {
+    margin: $diagram-toolbox-input-margin;
+
+    &.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 transparent;
+      }
+    }
+  }
+}
+
+.dx-diagram-toolbox-panel {
+  .dx-accordion {
+    margin: 0;
+
+    .dx-accordion-item {
+      border-left: none;
+      border-right: none;
+      border-bottom: 1px solid transparent;
+      border-top: none;
+      box-shadow: none;
+    }
+
+    .dx-accordion-item-opened {
+      margin: 0;
+    }
+
+    .dx-item-content.dx-accordion-item-title {
+      min-height: 32px;
+    }
+
+    .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: $fluent-field-value-top-padding 0 $fluent-field-value-bottom-padding $fluent-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: $fluent-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: $fluent-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, $fluent-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, $fluent-diagram-toolbar-icon-size, $fluent-diagram-toolbar-icon-size);
+}