@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 "../common/mixins" as *;
@use "../button/sizes" as *;
@use "../button/mixins" as *;
@use "../../base/textEditor";

// adduse

$generic-texteditor-border-width: $generic-base-border-width;
$generic-texteditor-input-padding:
  $generic-base-inline-borderedwidget-top-padding
  $generic-base-inline-borderedwidget-horizontal-padding
  $generic-base-inline-borderedwidget-bottom-padding;

$generic-texteditor-input-height: round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding;

$generic-texteditor-icon-container-size: $generic-base-inline-borderedwidget-inner-size;
$generic-texteditor-icon-size: $generic-base-icon-size;

$generic-texteditor-clear-icon-size: $generic-texteditor-icon-size + $generic-texteditor-clear-icon-oversize;

$generic-texteditor-invalid-badge-size: $generic-invalid-badge-size + 2 * $generic-invalid-badge-horizontal-padding;


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

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

@mixin texteditor-input-padding() {
  .dx-texteditor-input {
    padding-right: $generic-texteditor-invalid-badge-size;
  }

  &.dx-rtl .dx-texteditor-input {
    padding: $generic-texteditor-input-padding;
    padding-left: $generic-texteditor-invalid-badge-size;
  }
}

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

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

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

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

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

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

.dx-texteditor {
  &.dx-editor-outlined {
    background: $texteditor-bg;
    border: $generic-texteditor-border-width solid $texteditor-border-color;
    border-radius: $texteditor-border-radius;
  }

  &.dx-editor-underlined {
    background: $texteditor-underlined-bg;
    border-bottom: $generic-texteditor-border-width solid $texteditor-border-color;
    border-radius: 0;
  }

  &.dx-editor-filled {
    background: $texteditor-filled-bg;
    border: $generic-texteditor-border-width solid transparent;
    border-radius: $texteditor-border-radius;
  }

  &.dx-state-readonly {
    border-style: dashed;

    &.dx-editor-filled {
      border-color: transparent;
      background-color: color.change($texteditor-filled-bg, $alpha: 0.03);

      &.dx-state-focused {
        background-color: color.change($texteditor-filled-bg, $alpha: 0.03);
      }

      &.dx-state-hover {
        background-color: color.change($texteditor-hover-border-color, $alpha: 0.07);
      }
    }

    &.dx-editor-underlined {
      border-style: none;
      border-bottom-style: dashed;
    }
  }

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

    &.dx-editor-filled {
      border-color: transparent;
      background-color: color.change($texteditor-hover-border-color, $alpha: 0.1);
    }
  }

  &.dx-state-focused,
  &.dx-state-active {
    &.dx-editor-filled,
    &.dx-editor-underlined,
    &.dx-editor-outlined {
      border-color: $texteditor-focused-border-color;
    }

    &.dx-editor-filled {
      background-color: transparent;
    }
  }

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

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

  .dx-icon-clear {
    color: $texteditor-button-clear-icon-color;

    @include dx-texteditor-icon();
    @include dx-icon-sizing($generic-texteditor-clear-icon-size - $generic-texteditor-clear-icon-oversize, $generic-texteditor-icon-container-size);
  }
}

/* B231111 */
.dx-placeholder {
  color: $texteditor-placeholder-color;

  &::before {
    padding: $generic-texteditor-input-padding;

    .dx-editor-underlined & {
      padding-left: 0;
    }
  }
}

.dx-texteditor-input {
  margin: 0;
  padding: $generic-texteditor-input-padding;
  background: rgba(0, 0, 0, 0);
  color: $texteditor-color;
  font-size: 1em;
  border-radius: $texteditor-input-border-radius;
  min-height: $generic-texteditor-input-height;

  .dx-editor-underlined & {
    background: $texteditor-underlined-bg;
    padding-left: 0;
    padding-right: 0;
  }

  .dx-editor-filled & {
    background: transparent;
  }
}

.dx-editor-underlined {
  .dx-texteditor-buttons-container {
    + .dx-texteditor-input-container {
      .dx-texteditor-input {
        padding-left: $generic-base-inline-borderedwidget-horizontal-padding;

        @at-root #{selector-append(".dx-rtl", &)} {
          padding-left: 0;
          padding-right: $generic-base-inline-borderedwidget-horizontal-padding;
        }
      }

      .dx-placeholder {
        left: $generic-base-inline-borderedwidget-horizontal-padding;
      }

      @at-root #{selector-append(".dx-rtl", &)} {
        .dx-placeholder {
          left: 0;
          right: $generic-base-inline-borderedwidget-horizontal-padding;
        }
      }
    }

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

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

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

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

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

.dx-invalid.dx-texteditor {
  border-color: $texteditor-invalid-faded-border-color;

  &.dx-editor-filled,
  &.dx-editor-underlined,
  &.dx-editor-outlined {
    &.dx-state-focused {
      border-color: $texteditor-invalid-focused-border-color;
    }

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

  &.dx-editor-filled {
    background-color: $texteditor-filled-invalid-background;
    border-color: transparent;

    &.dx-state-focused {
      background: transparent;
    }
  }
}

.dx-editor-outlined,
.dx-editor-filled {
  .dx-texteditor-buttons-container {
    &:first-child {
      > .dx-button {
        &:last-child {
          margin-right: 0;
        }
      }
    }

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

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

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

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

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

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

.dx-valid.dx-texteditor {
  &.dx-editor-filled,
  &.dx-editor-underlined,
  &.dx-editor-outlined {
    .dx-texteditor-input-container {
      &::after {
        @include dx-valid-generic-badge();
      }
    }
  }
}

.dx-validation-pending.dx-texteditor {
  &.dx-editor-filled,
  &.dx-editor-underlined,
  &.dx-editor-outlined {
    .dx-texteditor-input-container {
      .dx-pending-indicator {
        @include dx-pending-indicator-generic();
      }
    }
  }
}

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

    @at-root #{selector-append(".dx-editor-underlined", &)} {
      padding-right: 0;
    }
  }
}