devextreme-themebuilder 26.1.2-beta → 26.1.3

package/data/scss/widgets/base/textEditor/_mixins.scss

@@ -1,852 +1,852 @@
-@use "sass:math";
-@use "sass:color";
-
-@mixin dx-editor-content-wrapper() {
-  display: flex;
-  flex-grow: 1;
-  position: relative;
-  align-items: baseline;
-}
-
-@mixin dx-state(
-  $label-font-size,
-  $label-offset-y,
-  $label-height,
-  $label-backdrop-bg
-) {
-  .dx-label {
-    border-top-width: 0;
-
-    span {
-      transform: translate(0, -$label-offset-y);
-      font-size: $label-font-size;
-      margin-top: 0;
-      top: 0;
-      height: $label-height;
-      line-height: normal;
-    }
-
-    &::before {
-      background-color: $label-backdrop-bg;
-    }
-  }
-
-  &.dx-textarea  {
-    .dx-label {
-      span {
-        top: 0;
-        margin-top: 0;
-      }
-    }
-  }
-}
-
-@mixin dx-state-empty(
-  $borderWidth,
-  $texteditor-label-transition,
-  $label-font-size,
-  $label-height,
-  $label-margin-top,
-  $texteditor-input-top-padding
-) {
-  .dx-label {
-    padding: 0 2px;
-    border-top-width: $borderWidth;
-
-    span {
-      transition: $texteditor-label-transition;
-      transform: translate(0, 0);
-      font-size: $label-font-size;
-      top: 50%;
-      margin-top: $label-margin-top;
-      height: $label-height;
-      line-height: normal;
-    }
-
-    &::before {
-      background-color: transparent;
-    }
-  }
-
-  &.dx-textarea  {
-    .dx-label {
-      span {
-        top: $texteditor-input-top-padding;
-        margin-top: 0;
-      }
-    }
-  }
-}
-
-@mixin dx-state-border-width($borderWidth) {
-  .dx-label {
-    border-top-width: 0;
-    border-bottom-width: $borderWidth;
-  }
-
-  .dx-label-before {
-    border-width: $borderWidth;
-    border-inline-end-width: 0;
-  }
-
-  .dx-label-after {
-    border-width: $borderWidth;
-    border-inline-start-width: 0;
-  }
-}
-
-@mixin dx-state-border-color($borderColor, $border-bottom-color) {
-  .dx-label {
-    border-color: $borderColor;
-    border-bottom-color: $border-bottom-color;
-  }
-
-  .dx-label-before {
-    border-color: $borderColor;
-    border-bottom-color: $border-bottom-color;
-  }
-
-  .dx-label-after {
-    border-color: $borderColor;
-    border-bottom-color: $border-bottom-color;
-  }
-}
-
-@mixin dx-state-border-style($borderStyle) {
-  .dx-label {
-    border-style: $borderStyle;
-  }
-
-  .dx-label-before {
-    border-style: $borderStyle;
-  }
-
-  .dx-label-after {
-    border-style: $borderStyle;
-  }
-}
-
-@mixin dx-editor-outlined(
-  $texteditor-input-border-radius,
-  $texteditor-label-font-size,
-  $label-border-width,
-  $label-active-border-width,
-  $label-readonly-border-style,
-  $label-active-height,
-  $label-empty-height,
-  $label-offset-y,
-  $label-offset-y-outside,
-  $label-backdrop-offset-y,
-  $label-before-min-width,
-  $label-after-min-width,
-  $label-backdrop-bg,
-  $texteditor-border,
-  $texteditor-border-color,
-  $texteditor-border-bottom-color,
-  $texteditor-disabled-color,
-  $texteditor-readonly-color,
-  $texteditor-hover-border-color,
-  $texteditor-hover-border-bottom-color,
-  $texteditor-focused-border-color,
-  $texteditor-focused-border-bottom-color,
-  $texteditor-invalid-faded-border-color,
-  $texteditor-invalid-focused-border-color,
-  $texteditor-label-transition,
-  $texteditor-font-size,
-  $texteditor-input-top-padding,
-  $label-margin-top-diff,
-  $texteditor-label-outside-font-size,
-  $texteditor-label-outside-height,
-) {
-  .dx-editor-outlined {
-    .dx-texteditor-label {
-      inset: 0;
-    }
-
-    .dx-label {
-      padding: 0 2px;
-      border-top-width: 0;
-      border-bottom-width: $label-border-width;
-      border-inline-width: 0;
-      border-style: solid;
-      border-top-color: $texteditor-border-color;
-      border-bottom-color: $texteditor-border-bottom-color;
-      margin-left: -2px;
-      margin-right: -2px;
-      border-radius: 1px;
-      clip-path: inset(-$texteditor-label-font-size 1px -1px 1px);
-
-      span {
-        position: relative;
-        font-size: $texteditor-label-font-size;
-        top: 0;
-        margin-top: 0;
-        transform: translate(0, -$label-offset-y);
-        height: $label-active-height;
-        line-height: normal;
-      }
-    }
-
-    .dx-label-before {
-      border-block-width: $label-border-width;
-      border-inline-start-width: $label-border-width;
-      border-inline-end-width: 0;
-      border-style: solid;
-      border-top-color: $texteditor-border-color;
-      border-bottom-color: $texteditor-border-bottom-color;
-      border-inline-start-color: $texteditor-border-color;
-      border-start-start-radius: $texteditor-input-border-radius;
-      border-end-start-radius: $texteditor-input-border-radius;
-      min-width: $label-before-min-width;
-      clip-path: inset(-1px 1px -1px -1px);
-    }
-
-    .dx-label-after {
-      flex-grow: 1;
-      min-width: $label-after-min-width;
-      border-block-width: $label-border-width;
-      border-inline-end-width: $label-border-width;
-      border-inline-start-width: 0;
-      border-style: solid;
-      border-top-color: $texteditor-border-color;
-      border-bottom-color: $texteditor-border-bottom-color;
-      border-inline-end-color: $texteditor-border-color;
-      border-start-end-radius: $texteditor-input-border-radius;
-      border-end-end-radius: $texteditor-input-border-radius;
-      clip-path: inset(-1px -1px -1px 1px);
-    }
-
-    &.dx-rtl {
-      .dx-label-before {
-        clip-path: inset(-1px -1px -1px 1px);
-      }
-
-      .dx-label-after {
-        clip-path: inset(-1px 1px -1px -1px);
-      }
-    }
-
-    &.dx-texteditor-with-label:not(.dx-texteditor-label-outside),
-    &.dx-texteditor-with-floating-label {
-      &.dx-daterangebox {
-        .dx-label {
-          position: relative;
-
-          &::before {
-            content: '';
-            width: 100%;
-            position: absolute;
-            height: 3px;
-            top: -$label-backdrop-offset-y;
-            margin-inline-start: -2px;
-            background-color: $label-backdrop-bg;
-          }
-        }
-      }
-    }
-
-    &.dx-texteditor-with-label,
-    &.dx-texteditor-with-floating-label {
-      outline: none;
-      margin-top: $label-offset-y;
-
-      &.dx-texteditor:not(.dx-daterangebox) {
-        border: $texteditor-border;
-        box-shadow: none;
-      }
-
-      &.dx-state-readonly {
-        @include dx-state-border-style($label-readonly-border-style);
-        @include dx-state-border-color($texteditor-readonly-color, $texteditor-readonly-color);
-      }
-
-      &.dx-state-disabled {
-        @include dx-state-border-color($texteditor-disabled-color, $texteditor-disabled-color);
-      }
-
-      &.dx-invalid {
-        @include dx-state-border-color($texteditor-invalid-faded-border-color, $texteditor-invalid-faded-border-color);
-
-        &.dx-state-hover,
-        &.dx-state-focused {
-          @include dx-state-border-color($texteditor-invalid-focused-border-color, $texteditor-invalid-focused-border-color);
-        }
-      }
-
-      &.dx-state-hover {
-        @include dx-state-border-color($texteditor-hover-border-color, $texteditor-hover-border-bottom-color);
-      }
-
-      &.dx-state-focused {
-        @include dx-state-border-color($texteditor-focused-border-color, $texteditor-focused-border-bottom-color);
-        @include dx-state-border-width($label-active-border-width);
-      }
-    }
-
-    &.dx-texteditor-label-outside {
-      margin-top: $label-offset-y-outside;
-
-      .dx-texteditor-label {
-        user-select: auto;
-      }
-
-      .dx-label-before,
-      .dx-label-after {
-        clip-path: none;
-      }
-
-      .dx-label {
-        margin: 0;
-        clip-path: none;
-        border-top-width: $label-border-width;
-        border-radius: 0;
-        border-start-end-radius: 1px;
-        border-end-end-radius: 1px;
-        margin-inline-start: 0;
-        padding: 0;
-
-        span {
-          position: absolute;
-          width: 100%;
-          cursor: default;
-          pointer-events: auto;
-          font-size: $texteditor-label-outside-font-size;
-          margin-top: 0;
-          top: -$label-offset-y-outside;
-          height: #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em;
-          line-height: #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em;
-        }
-      }
-    }
-
-    &.dx-texteditor-with-floating-label {
-      .dx-placeholder {
-        display: none;
-      }
-
-      &.dx-state-focused,
-      &.dx-dropdowneditor-active {
-        .dx-placeholder {
-          display: block;
-        }
-      }
-
-      $label-empty-margin-top: math.div(-$label-empty-height, 2) + $label-margin-top-diff;
-
-      &.dx-texteditor-empty {
-        @include dx-state-empty(
-          $label-border-width,
-          $texteditor-label-transition,
-          $texteditor-font-size,
-          $label-empty-height,
-          $label-empty-margin-top,
-          $texteditor-input-top-padding
-        );
-
-        &.dx-state-focused,
-        &.dx-dropdowneditor-active {
-          @include dx-state(
-            $texteditor-label-font-size,
-            $label-offset-y,
-            $label-active-height,
-            $label-backdrop-bg
-          );
-        }
-
-        &.dx-state-readonly {
-          .dx-placeholder {
-            display: none;
-          }
-
-          &.dx-state-focused {
-            @include dx-state-empty(
-              $label-active-border-width,
-              $texteditor-label-transition,
-              $texteditor-font-size,
-              $label-empty-height,
-              $label-empty-margin-top,
-              $texteditor-input-top-padding
-            );
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin dx-editor-filled(
-  $texteditor-label-transition,
-  $texteditor-label-font-size,
-  $texteditor-label-height,
-  $texteditor-label-line-height,
-  $texteditor-label-top-offset,
-  $texteditor-label-outside-top-offset,
-  $texteditor-font-size,
-  $texteditor-empty-label-height,
-  $texteditor-empty-label-line-height,
-  $texteditor-filled-input-horizontal-padding,
-  $texteditor-filled-input-with-label-top-padding,
-  $texteditor-filled-input-with-label-bottom-padding,
-  $texteditor-label-outside-font-size,
-  $texteditor-label-outside-height,
-) {
-  .dx-editor-filled {
-    .dx-texteditor-label {
-      .dx-label-after,
-      .dx-label-before {
-        min-width: $texteditor-filled-input-horizontal-padding;
-      }
-    }
-
-    &.dx-texteditor-with-label:not(.dx-texteditor-label-outside),
-    &.dx-texteditor-with-floating-label {
-      .dx-texteditor-input,
-      .dx-lookup-field,
-      .dx-placeholder::before {
-        padding-top: $texteditor-filled-input-with-label-top-padding;
-        padding-bottom: $texteditor-filled-input-with-label-bottom-padding;
-      }
-
-      .dx-lookup-field {
-        .dx-placeholder::before {
-          padding: 0;
-        }
-      }
-    }
-
-    &.dx-texteditor-with-label,
-    &.dx-texteditor-with-floating-label {
-      .dx-texteditor-label {
-        font-size: $texteditor-label-font-size;
-        height: $texteditor-label-height;
-        line-height: $texteditor-label-line-height;
-        top: $texteditor-label-top-offset;
-        margin-top: 0;
-      }
-    }
-
-    &.dx-texteditor-label-outside {
-      margin-top: $texteditor-label-outside-top-offset;
-
-      .dx-texteditor-label {
-        user-select: auto;
-        font-size: $texteditor-label-outside-font-size;
-        height: $texteditor-label-outside-height;
-        line-height: $texteditor-label-outside-height;
-        margin-top: 0;
-        top: -$texteditor-label-outside-top-offset;
-      }
-
-      .dx-label {
-        cursor: default;
-
-        span {
-          width: 100%;
-          pointer-events: auto;
-          position: absolute;
-          margin-bottom: 0;
-        }
-      }
-    }
-
-    &.dx-texteditor-with-floating-label {
-      &.dx-texteditor-empty,
-      &.dx-texteditor-empty.dx-state-readonly {
-        .dx-placeholder {
-          display: none;
-        }
-
-        .dx-texteditor-label {
-          transition: $texteditor-label-transition;
-          font-size: $texteditor-font-size;
-          height: $texteditor-empty-label-height;
-          line-height: $texteditor-empty-label-line-height;
-          top: 50%;
-          margin-top: math.div(-$texteditor-empty-label-height, 2);
-        }
-
-        &.dx-textarea {
-          .dx-texteditor-label {
-            top: $texteditor-filled-input-with-label-top-padding;
-            margin-top: 0;
-          }
-        }
-      }
-
-      &.dx-state-focused,
-      &.dx-dropdowneditor-active {
-        .dx-placeholder {
-          display: block;
-        }
-
-        .dx-texteditor-label {
-          height: $texteditor-label-height;
-          line-height: $texteditor-label-line-height;
-          font-size: $texteditor-label-font-size;
-          top: $texteditor-label-top-offset;
-          margin-top: 0;
-        }
-
-        &.dx-textarea {
-          .dx-texteditor-label {
-            top: $texteditor-label-top-offset;
-            margin-top: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin dx-editor-underlined(
-  $texteditor-label-transition,
-  $texteditor-label-font-size,
-  $texteditor-label-height,
-  $texteditor-label-line-height,
-  $texteditor-label-top-offset,
-  $texteditor-label-outside-top-offset,
-  $texteditor-font-size,
-  $texteditor-empty-label-height,
-  $texteditor-empty-label-line-height,
-  $texteditor-with-label-input-top-padding,
-  $texteditor-with-label-input-bottom-padding,
-  $texteditor-label-outside-font-size,
-  $texteditor-label-outside-height,
-) {
-  .dx-editor-underlined {
-    &.dx-texteditor-with-label:not(.dx-texteditor-label-outside),
-    &.dx-texteditor-with-floating-label {
-      .dx-texteditor-input,
-      .dx-lookup-field,
-      .dx-placeholder::before {
-        padding-top: $texteditor-with-label-input-top-padding;
-        padding-bottom: $texteditor-with-label-input-bottom-padding;
-      }
-
-      .dx-lookup-field {
-        .dx-placeholder::before {
-          padding: 0;
-        }
-      }
-    }
-
-    &.dx-texteditor-with-label,
-    &.dx-texteditor-with-floating-label {
-      .dx-texteditor-label {
-        transform: translate(0, 0);
-        height: $texteditor-label-height;
-        line-height: $texteditor-label-line-height;
-        top: $texteditor-label-top-offset;
-        margin-top: 0;
-      }
-    }
-
-    &.dx-texteditor-label-outside {
-      margin-top: $texteditor-label-outside-top-offset;
-
-      .dx-texteditor-label {
-        user-select: auto;
-        font-size: $texteditor-label-outside-font-size;
-        height: $texteditor-label-outside-height;
-        line-height: $texteditor-label-outside-height;
-        top: -$texteditor-label-outside-top-offset;
-        margin-top: 0;
-      }
-
-      .dx-label {
-        cursor: default;
-
-        span {
-          width: 100%;
-          pointer-events: auto;
-          position: absolute;
-          margin-bottom: 0;
-        }
-      }
-    }
-
-    &.dx-texteditor-with-floating-label {
-      &.dx-texteditor-empty,
-      &.dx-texteditor-empty.dx-state-readonly {
-        .dx-placeholder {
-          display: none;
-        }
-
-        .dx-texteditor-label {
-          transition: $texteditor-label-transition;
-          transform: translate(0, 0);
-          font-size: $texteditor-font-size;
-          height: $texteditor-empty-label-height;
-          line-height: $texteditor-empty-label-line-height;
-          top: 50%;
-          margin-top: math.div(-$texteditor-empty-label-height, 2);
-        }
-
-        &.dx-textarea {
-          .dx-texteditor-label {
-            top: $texteditor-with-label-input-top-padding;
-            margin-top: 0;
-          }
-        }
-      }
-
-      &.dx-state-focused,
-      &.dx-dropdowneditor-active {
-        .dx-placeholder {
-          display: block;
-        }
-
-        .dx-texteditor-label {
-          transform: translate(0, 0);
-          font-size: $texteditor-label-font-size;
-          height: $texteditor-label-height;
-          line-height: $texteditor-label-line-height;
-          top: $texteditor-label-top-offset;
-          margin-top: 0;
-        }
-
-        &.dx-textarea {
-          .dx-texteditor-label {
-            top: $texteditor-label-top-offset;
-            margin-top: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin dx-editor-buttons-container(
-  $generic-texteditor-button-top-padding,
-  $generic-texteditor-button-bottom-padding,
-  $generic-texteditor-button-icononly-top-padding,
-  $generic-texteditor-button-icononly-bottom-padding,
-  $generic-texteditor-button-icononly-horizontal-padding,
-  $generic-texteditor-custom-button-margin,
-) {
-  .dx-texteditor-buttons-container {
-    > .dx-button {
-      margin-top: 1px;
-      margin-bottom: 1px;
-      margin-inline-start: $generic-texteditor-custom-button-margin;
-      margin-inline-end: $generic-texteditor-custom-button-margin;
-
-      > .dx-button-content {
-        padding-top: $generic-texteditor-button-top-padding;
-        padding-bottom: $generic-texteditor-button-bottom-padding;
-      }
-
-      &.dx-button-has-icon:not(.dx-button-has-text) {
-        > .dx-button-content {
-          padding: $generic-texteditor-button-icononly-top-padding $generic-texteditor-button-icononly-horizontal-padding $generic-texteditor-button-icononly-bottom-padding;
-        }
-      }
-    }
-  }
-
-  .dx-editor-outlined,
-  .dx-editor-filled {
-    .dx-texteditor-buttons-container {
-      &:first-child {
-        > .dx-button {
-          &:last-child {
-            margin-inline-end: 0;
-          }
-        }
-      }
-
-      &:last-child {
-        > .dx-button {
-          &:first-child {
-            margin-inline-start: 0;
-          }
-        }
-      }
-    }
-  }
-
-  .dx-editor-underlined {
-    &.dx-texteditor-with-before-buttons {
-      .dx-texteditor-buttons-container {
-        > .dx-button {
-          &:first-child {
-            margin-left: 0;
-          }
-
-          &:last-child {
-            margin-right: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin dx-editor-buttons-container-material(
-  $material-underlined-editor-button-height,
-  $material-editor-custom-button-margin,
-  $material-editor-custom-button-last-child-margin,
-  $material-filled-texteditor-spin-button-horizontal-padding,
-  $last-button-horizontal-padding,
-  $material-button-vertical-padding,
-) {
-  .dx-texteditor {
-    .dx-texteditor-buttons-container {
-      > .dx-button,
-      > .dx-clear-button-area {
-        margin-inline-start: $material-editor-custom-button-margin;
-        margin-inline-end: $material-editor-custom-button-margin;
-      }
-
-      &:first-child {
-        > .dx-button,
-        > .dx-clear-button-area {
-          &:first-child {
-            margin-inline-start: $material-editor-custom-button-last-child-margin;
-          }
-
-          &:last-child {
-            margin-inline-end: 0;
-          }
-        }
-      }
-
-      &:last-child {
-        > .dx-button,
-        > .dx-clear-button-area {
-          &:first-child {
-            margin-inline-start: 0;
-          }
-
-          &:last-child {
-            margin-inline-end: $material-editor-custom-button-last-child-margin;
-          }
-        }
-
-        > .dx-dropdowneditor-button:last-child,
-        > .dx-clear-button-area {
-          margin-inline-end: $last-button-horizontal-padding;
-        }
-
-        > .dx-numberbox-spin-container:last-child {
-          margin-inline-end: $material-filled-texteditor-spin-button-horizontal-padding;
-        }
-
-        > div:empty:last-child {
-          display: none;
-        }
-      }
-    }
-  }
-
-  .dx-editor-underlined {
-    &.dx-texteditor-with-label,
-    &.dx-texteditor-with-floating-label {
-      &.dx-texteditor-with-before-buttons {
-        .dx-texteditor-buttons-container {
-          > .dx-button.dx-button-mode-text {
-            height: $material-underlined-editor-button-height;
-            margin-top: 1px;
-            margin-bottom: 3px;
-            margin-inline-end: $material-editor-custom-button-margin;
-            margin-inline-start: $material-editor-custom-button-margin;
-
-            .dx-button-content {
-              display: flex;
-              justify-content: center;
-              padding-top: $material-button-vertical-padding - 1px;
-
-              .dx-icon {
-                align-self: center;
-                margin-top: 1px;
-              }
-            }
-
-            &.dx-button-has-text {
-              .dx-button-content .dx-icon {
-                margin-top: 3px;
-              }
-            }
-
-            &:not(.dx-button-has-text) {
-              min-width: $material-underlined-editor-button-height;
-
-              .dx-button-content {
-                padding: 2px;
-              }
-            }
-          }
-
-          &:first-child {
-            > .dx-button {
-              &:first-child {
-                margin-inline-start: 0;
-              }
-            }
-          }
-
-          &:last-child {
-            > .dx-button {
-              &:last-child {
-                margin-inline-end: 0;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &.dx-texteditor-with-before-buttons {
-      .dx-texteditor-buttons-container {
-        > .dx-button.dx-button-mode-text {
-          height: $material-underlined-editor-button-height;
-          margin-top: 1px;
-          margin-bottom: 3px;
-          margin-inline-end: $material-editor-custom-button-margin;
-          margin-inline-start: $material-editor-custom-button-margin;
-
-          .dx-button-content {
-            display: flex;
-            justify-content: center;
-            padding-top: $material-button-vertical-padding - 1px;
-
-            .dx-icon {
-              align-self: center;
-              margin-top: 1px;
-            }
-          }
-
-          &.dx-button-has-text {
-            .dx-button-content .dx-icon {
-              margin-top: 3px;
-            }
-          }
-
-          &:not(.dx-button-has-text) {
-            min-width: $material-underlined-editor-button-height;
-
-            .dx-button-content {
-              padding: 2px;
-            }
-          }
-        }
-
-        &:first-child {
-          > .dx-button {
-            &:first-child {
-              margin-inline-start: 0;
-            }
-          }
-        }
-
-        &:last-child {
-          > .dx-button {
-            &:last-child {
-              margin-inline-end: 0;
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:math";
+@use "sass:color";
+
+@mixin dx-editor-content-wrapper() {
+  display: flex;
+  flex-grow: 1;
+  position: relative;
+  align-items: baseline;
+}
+
+@mixin dx-state(
+  $label-font-size,
+  $label-offset-y,
+  $label-height,
+  $label-backdrop-bg
+) {
+  .dx-label {
+    border-top-width: 0;
+
+    span {
+      transform: translate(0, -$label-offset-y);
+      font-size: $label-font-size;
+      margin-top: 0;
+      top: 0;
+      height: $label-height;
+      line-height: normal;
+    }
+
+    &::before {
+      background-color: $label-backdrop-bg;
+    }
+  }
+
+  &.dx-textarea  {
+    .dx-label {
+      span {
+        top: 0;
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+@mixin dx-state-empty(
+  $borderWidth,
+  $texteditor-label-transition,
+  $label-font-size,
+  $label-height,
+  $label-margin-top,
+  $texteditor-input-top-padding
+) {
+  .dx-label {
+    padding: 0 2px;
+    border-top-width: $borderWidth;
+
+    span {
+      transition: $texteditor-label-transition;
+      transform: translate(0, 0);
+      font-size: $label-font-size;
+      top: 50%;
+      margin-top: $label-margin-top;
+      height: $label-height;
+      line-height: normal;
+    }
+
+    &::before {
+      background-color: transparent;
+    }
+  }
+
+  &.dx-textarea  {
+    .dx-label {
+      span {
+        top: $texteditor-input-top-padding;
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+@mixin dx-state-border-width($borderWidth) {
+  .dx-label {
+    border-top-width: 0;
+    border-bottom-width: $borderWidth;
+  }
+
+  .dx-label-before {
+    border-width: $borderWidth;
+    border-inline-end-width: 0;
+  }
+
+  .dx-label-after {
+    border-width: $borderWidth;
+    border-inline-start-width: 0;
+  }
+}
+
+@mixin dx-state-border-color($borderColor, $border-bottom-color) {
+  .dx-label {
+    border-color: $borderColor;
+    border-bottom-color: $border-bottom-color;
+  }
+
+  .dx-label-before {
+    border-color: $borderColor;
+    border-bottom-color: $border-bottom-color;
+  }
+
+  .dx-label-after {
+    border-color: $borderColor;
+    border-bottom-color: $border-bottom-color;
+  }
+}
+
+@mixin dx-state-border-style($borderStyle) {
+  .dx-label {
+    border-style: $borderStyle;
+  }
+
+  .dx-label-before {
+    border-style: $borderStyle;
+  }
+
+  .dx-label-after {
+    border-style: $borderStyle;
+  }
+}
+
+@mixin dx-editor-outlined(
+  $texteditor-input-border-radius,
+  $texteditor-label-font-size,
+  $label-border-width,
+  $label-active-border-width,
+  $label-readonly-border-style,
+  $label-active-height,
+  $label-empty-height,
+  $label-offset-y,
+  $label-offset-y-outside,
+  $label-backdrop-offset-y,
+  $label-before-min-width,
+  $label-after-min-width,
+  $label-backdrop-bg,
+  $texteditor-border,
+  $texteditor-border-color,
+  $texteditor-border-bottom-color,
+  $texteditor-disabled-color,
+  $texteditor-readonly-color,
+  $texteditor-hover-border-color,
+  $texteditor-hover-border-bottom-color,
+  $texteditor-focused-border-color,
+  $texteditor-focused-border-bottom-color,
+  $texteditor-invalid-faded-border-color,
+  $texteditor-invalid-focused-border-color,
+  $texteditor-label-transition,
+  $texteditor-font-size,
+  $texteditor-input-top-padding,
+  $label-margin-top-diff,
+  $texteditor-label-outside-font-size,
+  $texteditor-label-outside-height,
+) {
+  .dx-editor-outlined {
+    .dx-texteditor-label {
+      inset: 0;
+    }
+
+    .dx-label {
+      padding: 0 2px;
+      border-top-width: 0;
+      border-bottom-width: $label-border-width;
+      border-inline-width: 0;
+      border-style: solid;
+      border-top-color: $texteditor-border-color;
+      border-bottom-color: $texteditor-border-bottom-color;
+      margin-left: -2px;
+      margin-right: -2px;
+      border-radius: 1px;
+      clip-path: inset(-$texteditor-label-font-size 1px -1px 1px);
+
+      span {
+        position: relative;
+        font-size: $texteditor-label-font-size;
+        top: 0;
+        margin-top: 0;
+        transform: translate(0, -$label-offset-y);
+        height: $label-active-height;
+        line-height: normal;
+      }
+    }
+
+    .dx-label-before {
+      border-block-width: $label-border-width;
+      border-inline-start-width: $label-border-width;
+      border-inline-end-width: 0;
+      border-style: solid;
+      border-top-color: $texteditor-border-color;
+      border-bottom-color: $texteditor-border-bottom-color;
+      border-inline-start-color: $texteditor-border-color;
+      border-start-start-radius: $texteditor-input-border-radius;
+      border-end-start-radius: $texteditor-input-border-radius;
+      min-width: $label-before-min-width;
+      clip-path: inset(-1px 1px -1px -1px);
+    }
+
+    .dx-label-after {
+      flex-grow: 1;
+      min-width: $label-after-min-width;
+      border-block-width: $label-border-width;
+      border-inline-end-width: $label-border-width;
+      border-inline-start-width: 0;
+      border-style: solid;
+      border-top-color: $texteditor-border-color;
+      border-bottom-color: $texteditor-border-bottom-color;
+      border-inline-end-color: $texteditor-border-color;
+      border-start-end-radius: $texteditor-input-border-radius;
+      border-end-end-radius: $texteditor-input-border-radius;
+      clip-path: inset(-1px -1px -1px 1px);
+    }
+
+    &.dx-rtl {
+      .dx-label-before {
+        clip-path: inset(-1px -1px -1px 1px);
+      }
+
+      .dx-label-after {
+        clip-path: inset(-1px 1px -1px -1px);
+      }
+    }
+
+    &.dx-texteditor-with-label:not(.dx-texteditor-label-outside),
+    &.dx-texteditor-with-floating-label {
+      &.dx-daterangebox {
+        .dx-label {
+          position: relative;
+
+          &::before {
+            content: '';
+            width: 100%;
+            position: absolute;
+            height: 3px;
+            top: -$label-backdrop-offset-y;
+            margin-inline-start: -2px;
+            background-color: $label-backdrop-bg;
+          }
+        }
+      }
+    }
+
+    &.dx-texteditor-with-label,
+    &.dx-texteditor-with-floating-label {
+      outline: none;
+      margin-top: $label-offset-y;
+
+      &.dx-texteditor:not(.dx-daterangebox) {
+        border: $texteditor-border;
+        box-shadow: none;
+      }
+
+      &.dx-state-readonly {
+        @include dx-state-border-style($label-readonly-border-style);
+        @include dx-state-border-color($texteditor-readonly-color, $texteditor-readonly-color);
+      }
+
+      &.dx-state-disabled {
+        @include dx-state-border-color($texteditor-disabled-color, $texteditor-disabled-color);
+      }
+
+      &.dx-invalid {
+        @include dx-state-border-color($texteditor-invalid-faded-border-color, $texteditor-invalid-faded-border-color);
+
+        &.dx-state-hover,
+        &.dx-state-focused {
+          @include dx-state-border-color($texteditor-invalid-focused-border-color, $texteditor-invalid-focused-border-color);
+        }
+      }
+
+      &.dx-state-hover {
+        @include dx-state-border-color($texteditor-hover-border-color, $texteditor-hover-border-bottom-color);
+      }
+
+      &.dx-state-focused {
+        @include dx-state-border-color($texteditor-focused-border-color, $texteditor-focused-border-bottom-color);
+        @include dx-state-border-width($label-active-border-width);
+      }
+    }
+
+    &.dx-texteditor-label-outside {
+      margin-top: $label-offset-y-outside;
+
+      .dx-texteditor-label {
+        user-select: auto;
+      }
+
+      .dx-label-before,
+      .dx-label-after {
+        clip-path: none;
+      }
+
+      .dx-label {
+        margin: 0;
+        clip-path: none;
+        border-top-width: $label-border-width;
+        border-radius: 0;
+        border-start-end-radius: 1px;
+        border-end-end-radius: 1px;
+        margin-inline-start: 0;
+        padding: 0;
+
+        span {
+          position: absolute;
+          width: 100%;
+          cursor: default;
+          pointer-events: auto;
+          font-size: $texteditor-label-outside-font-size;
+          margin-top: 0;
+          top: -$label-offset-y-outside;
+          height: #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em;
+          line-height: #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em;
+        }
+      }
+    }
+
+    &.dx-texteditor-with-floating-label {
+      .dx-placeholder {
+        display: none;
+      }
+
+      &.dx-state-focused,
+      &.dx-dropdowneditor-active {
+        .dx-placeholder {
+          display: block;
+        }
+      }
+
+      $label-empty-margin-top: math.div(-$label-empty-height, 2) + $label-margin-top-diff;
+
+      &.dx-texteditor-empty {
+        @include dx-state-empty(
+          $label-border-width,
+          $texteditor-label-transition,
+          $texteditor-font-size,
+          $label-empty-height,
+          $label-empty-margin-top,
+          $texteditor-input-top-padding
+        );
+
+        &.dx-state-focused,
+        &.dx-dropdowneditor-active {
+          @include dx-state(
+            $texteditor-label-font-size,
+            $label-offset-y,
+            $label-active-height,
+            $label-backdrop-bg
+          );
+        }
+
+        &.dx-state-readonly {
+          .dx-placeholder {
+            display: none;
+          }
+
+          &.dx-state-focused {
+            @include dx-state-empty(
+              $label-active-border-width,
+              $texteditor-label-transition,
+              $texteditor-font-size,
+              $label-empty-height,
+              $label-empty-margin-top,
+              $texteditor-input-top-padding
+            );
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin dx-editor-filled(
+  $texteditor-label-transition,
+  $texteditor-label-font-size,
+  $texteditor-label-height,
+  $texteditor-label-line-height,
+  $texteditor-label-top-offset,
+  $texteditor-label-outside-top-offset,
+  $texteditor-font-size,
+  $texteditor-empty-label-height,
+  $texteditor-empty-label-line-height,
+  $texteditor-filled-input-horizontal-padding,
+  $texteditor-filled-input-with-label-top-padding,
+  $texteditor-filled-input-with-label-bottom-padding,
+  $texteditor-label-outside-font-size,
+  $texteditor-label-outside-height,
+) {
+  .dx-editor-filled {
+    .dx-texteditor-label {
+      .dx-label-after,
+      .dx-label-before {
+        min-width: $texteditor-filled-input-horizontal-padding;
+      }
+    }
+
+    &.dx-texteditor-with-label:not(.dx-texteditor-label-outside),
+    &.dx-texteditor-with-floating-label {
+      .dx-texteditor-input,
+      .dx-lookup-field,
+      .dx-placeholder::before {
+        padding-top: $texteditor-filled-input-with-label-top-padding;
+        padding-bottom: $texteditor-filled-input-with-label-bottom-padding;
+      }
+
+      .dx-lookup-field {
+        .dx-placeholder::before {
+          padding: 0;
+        }
+      }
+    }
+
+    &.dx-texteditor-with-label,
+    &.dx-texteditor-with-floating-label {
+      .dx-texteditor-label {
+        font-size: $texteditor-label-font-size;
+        height: $texteditor-label-height;
+        line-height: $texteditor-label-line-height;
+        top: $texteditor-label-top-offset;
+        margin-top: 0;
+      }
+    }
+
+    &.dx-texteditor-label-outside {
+      margin-top: $texteditor-label-outside-top-offset;
+
+      .dx-texteditor-label {
+        user-select: auto;
+        font-size: $texteditor-label-outside-font-size;
+        height: $texteditor-label-outside-height;
+        line-height: $texteditor-label-outside-height;
+        margin-top: 0;
+        top: -$texteditor-label-outside-top-offset;
+      }
+
+      .dx-label {
+        cursor: default;
+
+        span {
+          width: 100%;
+          pointer-events: auto;
+          position: absolute;
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    &.dx-texteditor-with-floating-label {
+      &.dx-texteditor-empty,
+      &.dx-texteditor-empty.dx-state-readonly {
+        .dx-placeholder {
+          display: none;
+        }
+
+        .dx-texteditor-label {
+          transition: $texteditor-label-transition;
+          font-size: $texteditor-font-size;
+          height: $texteditor-empty-label-height;
+          line-height: $texteditor-empty-label-line-height;
+          top: 50%;
+          margin-top: math.div(-$texteditor-empty-label-height, 2);
+        }
+
+        &.dx-textarea {
+          .dx-texteditor-label {
+            top: $texteditor-filled-input-with-label-top-padding;
+            margin-top: 0;
+          }
+        }
+      }
+
+      &.dx-state-focused,
+      &.dx-dropdowneditor-active {
+        .dx-placeholder {
+          display: block;
+        }
+
+        .dx-texteditor-label {
+          height: $texteditor-label-height;
+          line-height: $texteditor-label-line-height;
+          font-size: $texteditor-label-font-size;
+          top: $texteditor-label-top-offset;
+          margin-top: 0;
+        }
+
+        &.dx-textarea {
+          .dx-texteditor-label {
+            top: $texteditor-label-top-offset;
+            margin-top: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin dx-editor-underlined(
+  $texteditor-label-transition,
+  $texteditor-label-font-size,
+  $texteditor-label-height,
+  $texteditor-label-line-height,
+  $texteditor-label-top-offset,
+  $texteditor-label-outside-top-offset,
+  $texteditor-font-size,
+  $texteditor-empty-label-height,
+  $texteditor-empty-label-line-height,
+  $texteditor-with-label-input-top-padding,
+  $texteditor-with-label-input-bottom-padding,
+  $texteditor-label-outside-font-size,
+  $texteditor-label-outside-height,
+) {
+  .dx-editor-underlined {
+    &.dx-texteditor-with-label:not(.dx-texteditor-label-outside),
+    &.dx-texteditor-with-floating-label {
+      .dx-texteditor-input,
+      .dx-lookup-field,
+      .dx-placeholder::before {
+        padding-top: $texteditor-with-label-input-top-padding;
+        padding-bottom: $texteditor-with-label-input-bottom-padding;
+      }
+
+      .dx-lookup-field {
+        .dx-placeholder::before {
+          padding: 0;
+        }
+      }
+    }
+
+    &.dx-texteditor-with-label,
+    &.dx-texteditor-with-floating-label {
+      .dx-texteditor-label {
+        transform: translate(0, 0);
+        height: $texteditor-label-height;
+        line-height: $texteditor-label-line-height;
+        top: $texteditor-label-top-offset;
+        margin-top: 0;
+      }
+    }
+
+    &.dx-texteditor-label-outside {
+      margin-top: $texteditor-label-outside-top-offset;
+
+      .dx-texteditor-label {
+        user-select: auto;
+        font-size: $texteditor-label-outside-font-size;
+        height: $texteditor-label-outside-height;
+        line-height: $texteditor-label-outside-height;
+        top: -$texteditor-label-outside-top-offset;
+        margin-top: 0;
+      }
+
+      .dx-label {
+        cursor: default;
+
+        span {
+          width: 100%;
+          pointer-events: auto;
+          position: absolute;
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    &.dx-texteditor-with-floating-label {
+      &.dx-texteditor-empty,
+      &.dx-texteditor-empty.dx-state-readonly {
+        .dx-placeholder {
+          display: none;
+        }
+
+        .dx-texteditor-label {
+          transition: $texteditor-label-transition;
+          transform: translate(0, 0);
+          font-size: $texteditor-font-size;
+          height: $texteditor-empty-label-height;
+          line-height: $texteditor-empty-label-line-height;
+          top: 50%;
+          margin-top: math.div(-$texteditor-empty-label-height, 2);
+        }
+
+        &.dx-textarea {
+          .dx-texteditor-label {
+            top: $texteditor-with-label-input-top-padding;
+            margin-top: 0;
+          }
+        }
+      }
+
+      &.dx-state-focused,
+      &.dx-dropdowneditor-active {
+        .dx-placeholder {
+          display: block;
+        }
+
+        .dx-texteditor-label {
+          transform: translate(0, 0);
+          font-size: $texteditor-label-font-size;
+          height: $texteditor-label-height;
+          line-height: $texteditor-label-line-height;
+          top: $texteditor-label-top-offset;
+          margin-top: 0;
+        }
+
+        &.dx-textarea {
+          .dx-texteditor-label {
+            top: $texteditor-label-top-offset;
+            margin-top: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin dx-editor-buttons-container(
+  $generic-texteditor-button-top-padding,
+  $generic-texteditor-button-bottom-padding,
+  $generic-texteditor-button-icononly-top-padding,
+  $generic-texteditor-button-icononly-bottom-padding,
+  $generic-texteditor-button-icononly-horizontal-padding,
+  $generic-texteditor-custom-button-margin,
+) {
+  .dx-texteditor-buttons-container {
+    > .dx-button {
+      margin-top: 1px;
+      margin-bottom: 1px;
+      margin-inline-start: $generic-texteditor-custom-button-margin;
+      margin-inline-end: $generic-texteditor-custom-button-margin;
+
+      > .dx-button-content {
+        padding-top: $generic-texteditor-button-top-padding;
+        padding-bottom: $generic-texteditor-button-bottom-padding;
+      }
+
+      &.dx-button-has-icon:not(.dx-button-has-text) {
+        > .dx-button-content {
+          padding: $generic-texteditor-button-icononly-top-padding $generic-texteditor-button-icononly-horizontal-padding $generic-texteditor-button-icononly-bottom-padding;
+        }
+      }
+    }
+  }
+
+  .dx-editor-outlined,
+  .dx-editor-filled {
+    .dx-texteditor-buttons-container {
+      &:first-child {
+        > .dx-button {
+          &:last-child {
+            margin-inline-end: 0;
+          }
+        }
+      }
+
+      &:last-child {
+        > .dx-button {
+          &:first-child {
+            margin-inline-start: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .dx-editor-underlined {
+    &.dx-texteditor-with-before-buttons {
+      .dx-texteditor-buttons-container {
+        > .dx-button {
+          &:first-child {
+            margin-left: 0;
+          }
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin dx-editor-buttons-container-material(
+  $material-underlined-editor-button-height,
+  $material-editor-custom-button-margin,
+  $material-editor-custom-button-last-child-margin,
+  $material-filled-texteditor-spin-button-horizontal-padding,
+  $last-button-horizontal-padding,
+  $material-button-vertical-padding,
+) {
+  .dx-texteditor {
+    .dx-texteditor-buttons-container {
+      > .dx-button,
+      > .dx-clear-button-area {
+        margin-inline-start: $material-editor-custom-button-margin;
+        margin-inline-end: $material-editor-custom-button-margin;
+      }
+
+      &:first-child {
+        > .dx-button,
+        > .dx-clear-button-area {
+          &:first-child {
+            margin-inline-start: $material-editor-custom-button-last-child-margin;
+          }
+
+          &:last-child {
+            margin-inline-end: 0;
+          }
+        }
+      }
+
+      &:last-child {
+        > .dx-button,
+        > .dx-clear-button-area {
+          &:first-child {
+            margin-inline-start: 0;
+          }
+
+          &:last-child {
+            margin-inline-end: $material-editor-custom-button-last-child-margin;
+          }
+        }
+
+        > .dx-dropdowneditor-button:last-child,
+        > .dx-clear-button-area {
+          margin-inline-end: $last-button-horizontal-padding;
+        }
+
+        > .dx-numberbox-spin-container:last-child {
+          margin-inline-end: $material-filled-texteditor-spin-button-horizontal-padding;
+        }
+
+        > div:empty:last-child {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .dx-editor-underlined {
+    &.dx-texteditor-with-label,
+    &.dx-texteditor-with-floating-label {
+      &.dx-texteditor-with-before-buttons {
+        .dx-texteditor-buttons-container {
+          > .dx-button.dx-button-mode-text {
+            height: $material-underlined-editor-button-height;
+            margin-top: 1px;
+            margin-bottom: 3px;
+            margin-inline-end: $material-editor-custom-button-margin;
+            margin-inline-start: $material-editor-custom-button-margin;
+
+            .dx-button-content {
+              display: flex;
+              justify-content: center;
+              padding-top: $material-button-vertical-padding - 1px;
+
+              .dx-icon {
+                align-self: center;
+                margin-top: 1px;
+              }
+            }
+
+            &.dx-button-has-text {
+              .dx-button-content .dx-icon {
+                margin-top: 3px;
+              }
+            }
+
+            &:not(.dx-button-has-text) {
+              min-width: $material-underlined-editor-button-height;
+
+              .dx-button-content {
+                padding: 2px;
+              }
+            }
+          }
+
+          &:first-child {
+            > .dx-button {
+              &:first-child {
+                margin-inline-start: 0;
+              }
+            }
+          }
+
+          &:last-child {
+            > .dx-button {
+              &:last-child {
+                margin-inline-end: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.dx-texteditor-with-before-buttons {
+      .dx-texteditor-buttons-container {
+        > .dx-button.dx-button-mode-text {
+          height: $material-underlined-editor-button-height;
+          margin-top: 1px;
+          margin-bottom: 3px;
+          margin-inline-end: $material-editor-custom-button-margin;
+          margin-inline-start: $material-editor-custom-button-margin;
+
+          .dx-button-content {
+            display: flex;
+            justify-content: center;
+            padding-top: $material-button-vertical-padding - 1px;
+
+            .dx-icon {
+              align-self: center;
+              margin-top: 1px;
+            }
+          }
+
+          &.dx-button-has-text {
+            .dx-button-content .dx-icon {
+              margin-top: 3px;
+            }
+          }
+
+          &:not(.dx-button-has-text) {
+            min-width: $material-underlined-editor-button-height;
+
+            .dx-button-content {
+              padding: 2px;
+            }
+          }
+        }
+
+        &:first-child {
+          > .dx-button {
+            &:first-child {
+              margin-inline-start: 0;
+            }
+          }
+        }
+
+        &:last-child {
+          > .dx-button {
+            &:last-child {
+              margin-inline-end: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}