@use "sass:math";
@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/icons" as *;
@use "../common/sizes" as *;
@use "../button/sizes" as *;
@use "../common/mixins" as *;
@use "../common/sizes" as *;
@use "../../base/textEditor";

// adduse

$material-base-standard-texteditor-input-horizontal-padding: 0;
$material-texteditor-icon-container-size: $material-base-icon-size - 2px;
$material-texteditor-invalid-badge-size: $material-invalid-badge-size + 2 * $material-invalid-badge-horizontal-padding;
$material-editor-custom-button-margin: 5px;


@mixin dx-texteditor-icon() {
  position: absolute;
  top: 50%;
  margin-top: math.div(-$material-texteditor-icon-container-size, 2);

  @include dx-icon-sizing($material-texteditor-icon-container-size);
}

@mixin texteditor-input-padding-underlined() {
  .dx-texteditor-input {
    padding-right: $material-texteditor-invalid-badge-size + $material-base-standard-texteditor-input-horizontal-padding;
  }

  &.dx-rtl .dx-texteditor-input {
    padding: $material-standard-texteditor-input-padding;
    padding-left: $material-texteditor-invalid-badge-size + $material-base-standard-texteditor-input-horizontal-padding;
  }
}

@mixin texteditor-input-padding-filled() {
  .dx-texteditor-input {
    padding-right: $material-texteditor-invalid-badge-size + $material-filled-texteditor-input-horizontal-padding;
  }

  &.dx-rtl .dx-texteditor-input {
    padding: $material-filled-texteditor-input-padding;
    padding-left: $material-texteditor-invalid-badge-size + $material-filled-texteditor-input-horizontal-padding;
  }
}

@mixin texteditor-validation-icon-offset() {
  right: $material-invalid-badge-halfhorizontal-padding;

  @at-root #{selector-append(".dx-rtl", &)},
  .dx-rtl & {
    left: $material-invalid-badge-halfhorizontal-padding;
    right: auto;
  }
}

@mixin texteditor-validation-icon-offset-filled() {
  right: $material-filled-texteditor-input-horizontal-padding + 1px;

  @at-root #{selector-append(".dx-rtl", &)},
  .dx-rtl & {
    left: $material-filled-texteditor-input-horizontal-padding + 1px;
    right: auto;
  }
}

@mixin validation-icon-position() {
  &.dx-invalid,
  &.dx-valid {
    &.dx-editor-underlined {
      @include texteditor-input-padding-underlined();
    }

    &.dx-editor-filled,
    &.dx-editor-outlined {
      @include texteditor-input-padding-filled();

      .dx-texteditor-input-container {
        &::after {
          @include texteditor-validation-icon-offset-filled();
        }
      }
    }

    .dx-texteditor-input-container {
      &::after {
        @include texteditor-validation-icon-offset();
      }
    }
  }
}

@mixin pending-indicator-position() {
  &.dx-validation-pending {
    &.dx-editor-underlined {
      @include texteditor-input-padding-underlined();
    }

    &.dx-editor-filled,
    &.dx-editor-outlined {
      @include texteditor-input-padding-filled();

      .dx-texteditor-input-container {
        .dx-pending-indicator {
          @include texteditor-validation-icon-offset-filled();
        }
      }
    }

    .dx-texteditor-input-container {
      .dx-pending-indicator {
        @include texteditor-validation-icon-offset();
      }
    }
  }
}

.dx-texteditor {
  border-top-left-radius: $texteditor-input-border-radius;
  border-top-right-radius: $texteditor-input-border-radius;
  position: relative;

  @mixin dx-texteditor-borders-position() {
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    width: 100%;
    content: '';
    position: absolute;
  }

  &::before {
    @include dx-texteditor-borders-position();

    z-index: 2;
    transform: scale(0);
  }

  &::after {
    @include dx-texteditor-borders-position();
  }

  &.dx-state-focused,
  &.dx-state-active {
    background-color: $texteditor-focused-bg;

    &::before {
      border-bottom: 2px solid $texteditor-focused-border-color;
      transform: scale(1);
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.02, 1);
    }
  }

  @include validation-icon-position();
  @include pending-indicator-position();

  &.dx-editor-filled,
  &.dx-editor-outlined {
    .dx-texteditor-buttons-container {
      right: $material-filled-texteditor-input-horizontal-padding;
    }

    &.dx-show-clear-button {
      .dx-texteditor-input {
        padding-right: $material-filled-texteditor-input-horizontal-padding;

        @at-root #{selector-append(".dx-rtl", &)},
        .dx-rtl & {
          padding: $material-filled-texteditor-input-padding;
          padding-left: $material-filled-texteditor-input-horizontal-padding;
        }
      }
    }

    .dx-placeholder {
      &::before {
        padding: $material-filled-texteditor-input-padding;
      }
    }

    .dx-texteditor-input {
      padding: $material-filled-texteditor-input-padding;
    }

    .dx-rtl &,
    &.dx-rtl {
      .dx-texteditor-buttons-container {
        left: $material-filled-texteditor-input-horizontal-padding;
        right: auto;
      }
    }
  }

  &.dx-editor-filled {
    background-color: $texteditor-bg;

    &.dx-state-hover {
      background-color: $texteditor-hover-bg;

      &::after {
        border-bottom: 1px solid $texteditor-hover-border-color;
      }
    }

    &.dx-state-disabled,
    &.dx-state-readonly,
    &.dx-state-readonly.dx-state-hover {
      background-color: color.change($texteditor-bg, $alpha: 0.12);

      .dx-texteditor-input {
        color: color.change($texteditor-color, $alpha: 0.5);
      }
    }
  }

  &.dx-editor-underlined {
    background-color: transparent;

    .dx-texteditor-buttons-container {
      right: $material-base-standard-texteditor-input-horizontal-padding;
    }

    &::after {
      border-bottom: 1px solid $texteditor-border-color;
    }

    &.dx-state-hover {
      &::after {
        border-bottom: 2px solid $texteditor-hover-border-color;
      }
    }

    .dx-placeholder {
      &::before {
        padding: $material-standard-texteditor-input-padding;
      }
    }

    .dx-texteditor-input {
      padding: $material-standard-texteditor-input-padding;
    }

    .dx-rtl &,
    &.dx-rtl {
      .dx-texteditor-buttons-container {
        left: $material-base-standard-texteditor-input-horizontal-padding;
        right: auto;
      }
    }

    &.dx-state-disabled,
    &.dx-state-readonly,
    &.dx-state-readonly.dx-state-hover {
      &::after {
        border-bottom-style: dotted;
        border-bottom-width: 1px;
      }
    }

    &.dx-invalid {
      &::after {
        border-bottom-color: $texteditor-invalid-faded-border-color;
      }
    }
  }

  &.dx-editor-outlined {
    background-color: transparent;
    border-radius: $texteditor-input-border-radius;
    box-shadow: inset 0 0 0 1px $texteditor-border-color;

    &::before {
      display: none;
    }

    &.dx-state-hover {
      box-shadow: inset 0 0 0 1px $texteditor-hover-border-color;
    }

    &.dx-state-disabled,
    &.dx-state-readonly,
    &.dx-state-readonly.dx-state-hover {
      box-shadow: inset 0 0 0 1px color.change($texteditor-color, $alpha: 0.5);

      .dx-texteditor-input {
        color: color.change($texteditor-color, $alpha: 0.5);
      }
    }

    &.dx-state-focused {
      box-shadow: inset 0 0 0 2px $texteditor-focused-border-color;

      &.dx-invalid {
        box-shadow: inset 0 0 0 2px $texteditor-invalid-focused-border-color;
      }
    }

    &.dx-invalid {
      box-shadow: inset 0 0 0 1px $texteditor-invalid-faded-border-color;
    }
  }
}

.dx-show-clear-button {
  .dx-clear-button-area {
    width: $material-texteditor-icon-container-size;
    min-width: $material-texteditor-icon-container-size;
    right: 0;
  }

  .dx-icon-clear {
    color: $texteditor-button-clear-icon-color;
    background-color: $texteditor-button-clear-icon-color-bg;
    border-radius: 50%;

    @include dx-texteditor-icon();
    @include dx-icon-font-centered-sizing($material-texteditor-clear-icon-size);
  }

  &:not(.dx-texteditor-empty) {
    @include validation-icon-position();
    @include pending-indicator-position();
  }
}


/* B231111 */
.dx-placeholder {
  color: $texteditor-placeholder-color;
  font-size: $material-texteditor-font-size;
}

.dx-texteditor-input {
  margin: 0;
  background-color: transparent;
  color: $texteditor-color;
  font-size: $material-texteditor-font-size;
}

.dx-invalid.dx-texteditor {
  &.dx-state-hover {
    &::after {
      border-bottom-color: $texteditor-invalid-faded-border-color;
    }
  }

  &.dx-state-focused,
  &.dx-state-active {
    &::before {
      border-top: 1px solid $texteditor-invalid-focused-border-color;
      border-bottom: 1px solid $texteditor-invalid-focused-border-color;
    }
  }

  &.dx-show-invalid-badge .dx-texteditor-input-container {
    &::after {
      @include dx-invalid-material-badge();
    }
  }
}

.dx-editor-outlined,
.dx-editor-filled {
  .dx-texteditor-buttons-container {
    > .dx-button {
      margin-left: $material-editor-custom-button-margin;
      margin-right: $material-editor-custom-button-margin;
    }

    &:first-child {
      > .dx-button {
        &:first-child {
          margin-left: $material-editor-custom-button-margin * 2;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }

    &:last-child {
      > .dx-button {
        &:first-child {
          margin-left: 0;
        }

        &:last-child {
          margin-right: $material-editor-custom-button-margin * 2;
        }
      }

      > .dx-dropdowneditor-button:last-child {
        margin-right: $material-filled-texteditor-input-horizontal-padding;
      }

      > .dx-clear-button-area:last-child,
      > .dx-numberbox-spin-container:last-child {
        margin-right: 8px;
      }
    }

    @at-root #{selector-append(".dx-rtl", &)} {
      &:first-child {
        > .dx-button {
          &:first-child {
            margin-left: $material-editor-custom-button-margin;
            margin-right: $material-editor-custom-button-margin * 2;
          }

          &:last-child {
            margin-left: 0;
            margin-right: $material-editor-custom-button-margin;
          }

          &:first-child:last-child {
            margin-left: 0;
            margin-right: $material-editor-custom-button-margin * 2;
          }
        }
      }

      &:last-child {
        > .dx-button {
          &:first-child {
            margin-left: $material-editor-custom-button-margin;
            margin-right: 0;
          }

          &:last-child {
            margin-left: $material-editor-custom-button-margin * 2;
            margin-right: $material-editor-custom-button-margin;
          }
        }

        > .dx-dropdowneditor-button:last-child {
          margin-left: $material-filled-texteditor-input-horizontal-padding;
          margin-right: 0;
        }

        > .dx-clear-button-area:last-child,
        > .dx-numberbox-spin-container:last-child {
          margin-left: 8px;
          margin-right: 0;
        }
      }
    }
  }
}

.dx-editor-underlined {
  .dx-texteditor-buttons-container {
    > .dx-button.dx-button-mode-text {
      height: $material-underlined-editor-button-height;
      margin: 1px $material-editor-custom-button-margin 3px;

      .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-left: 0;
        }
      }
    }

    &:last-child {
      > .dx-button {
        &:last-child {
          margin-right: 0;
        }
      }
    }

    @at-root #{selector-append(".dx-rtl", &)} {
      &:first-child {
        > .dx-button {
          &:first-child {
            margin-left: $material-editor-custom-button-margin;
            margin-right: 0;
          }
        }
      }

      &:last-child {
        > .dx-button {
          &:first-child {
            margin-left: $material-editor-custom-button-margin;
            margin-right: $material-editor-custom-button-margin;
          }

          &:last-child {
            margin-left: 0;
            margin-right: $material-editor-custom-button-margin;
          }
        }
      }
    }
  }
}

.dx-valid.dx-texteditor {
  .dx-texteditor-input-container {
    &::after {
      @include dx-valid-material-badge();
    }
  }
}

.dx-validation-pending.dx-texteditor {
  .dx-texteditor-input-container {
    .dx-pending-indicator {
      @include dx-pending-indicator-material();
    }
  }
}

.dx-rtl {
  .dx-placeholder,
  .dx-placeholder::before {
    right: 0;
    left: auto;
  }
}