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

// 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-filled() {
  .dx-texteditor-input {
    padding-inline-end: $material-texteditor-invalid-badge-size + $material-filled-texteditor-input-horizontal-padding;
  }
}

@mixin texteditor-validation-icon-offset() {
  inset-inline-end: $material-invalid-badge-halfhorizontal-padding;
}

@mixin texteditor-validation-icon-offset-filled() {
  inset-inline-end: $material-filled-texteditor-input-button-horizontal-padding;
}

@mixin validation-icon-position() {
  &.dx-invalid,
  &.dx-valid {
    &.dx-editor-underlined {
      .dx-texteditor-input {
        padding-inline-end: $material-texteditor-invalid-badge-size + $material-base-standard-texteditor-input-horizontal-padding;
      }
    }

    &.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 {
      .dx-texteditor-input {
        padding-inline-end: $material-texteditor-invalid-badge-size + $material-base-standard-texteditor-input-horizontal-padding;
      }
    }

    &.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-texteditor-label {
      color: $base-accent;
      font-size: $material-texteditor-label-font-size;
    }

    &.dx-invalid {
      .dx-texteditor-label {
        color: $base-invalid-color;
      }
    }
  }

  &.dx-texteditor-label-outside {
    .dx-texteditor-label {
      color: $base-text-color;
    }

    &.dx-invalid {
      .dx-texteditor-label {
        color: $base-invalid-color;
      }
    }
  }

  &.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-placeholder::before,
    .dx-lookup-field,
    .dx-texteditor-input {
      padding: $material-filled-texteditor-input-padding;
    }
  }

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

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

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

      &::after {
        border-bottom-color: $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: $texteditor-disabled-color;
      }
    }
  }

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

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

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

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

    &.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-disabled,
    &.dx-state-readonly {
      box-shadow: inset 0 0 0 1px $texteditor-disabled-color;

      .dx-texteditor-input {
        color: $texteditor-disabled-color;
      }
    }

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

    &.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();
  }
}
.dx-placeholder {
  color: $texteditor-placeholder-color;
  font-size: $material-texteditor-font-size;
  line-height: normal;
}

.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-bottom: 2px solid $texteditor-invalid-focused-border-color;
    }
  }

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

.dx-texteditor-label {
  position: absolute;
  font-size: $material-texteditor-label-font-size;
  color: $texteditor-label-color;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  cursor: text;
  width: 100%;
  display: flex;
  flex-direction: row;
  top: 0;
  left: 0;

  .dx-label {
    display: flex;

    span {
      overflow: hidden;
      text-overflow: ellipsis;
      width: auto;
      max-width: 100%;
      display: block;
      margin-bottom: -1px;
    }
  }

  .dx-invalid & {
    color: $base-invalid-color;
  }
}

@include dx-editor-outlined(
  $texteditor-input-border-radius,
  $material-texteditor-label-font-size,
  $material-base-border-width,
  2px,
  solid,
  $material-texteditor-label-font-size + 2,
  $material-base-inline-block-height,
  math.div(1px + $material-texteditor-label-font-size, 2),
  $material-texteditor-label-outside-top-offset,
  0.5px,
  $material-filled-texteditor-input-horizontal-padding,
  $material-filled-texteditor-input-horizontal-padding,
  $base-bg,
  none,
  $texteditor-border-color,
  $texteditor-border-color,
  $texteditor-disabled-color,
  $texteditor-disabled-color,
  $texteditor-hover-border-color,
  $texteditor-hover-border-color,
  $texteditor-focused-border-color,
  $texteditor-focused-border-color,
  $texteditor-invalid-faded-border-color,
  $texteditor-invalid-focused-border-color,
  $texteditor-label-transition,
  $material-texteditor-font-size,
  $material-filled-texteditor-input-top-padding,
  0,
  $material-texteditor-label-outside-font-size,
  $material-texteditor-label-outside-height,
);
@include dx-editor-filled(
  $texteditor-label-transition,
  $material-texteditor-label-font-size,
  $material-texteditor-label-font-size,
  $material-texteditor-label-font-size,
  $material-texteditor-label-top-offset,
  $material-texteditor-label-outside-top-offset,
  $material-texteditor-font-size,
  $material-texteditor-font-size,
  $material-texteditor-font-size + 1px,
  $material-filled-texteditor-input-horizontal-padding,
  $material-filled-texteditor-input-with-label-top-padding,
  $material-filled-texteditor-input-with-label-bottom-padding,
  $material-texteditor-label-outside-font-size,
  $material-texteditor-label-outside-height,
);
@include dx-editor-underlined(
  $texteditor-label-transition,
  $material-texteditor-label-font-size,
  $material-texteditor-label-font-size,
  $material-texteditor-label-font-size,
  $material-texteditor-label-top-offset,
  $material-texteditor-label-outside-top-offset,
  $material-texteditor-font-size,
  $material-texteditor-font-size,
  $material-texteditor-font-size + 1px,
  $material-standard-texteditor-with-label-input-top-padding,
  $material-standard-texteditor-with-label-input-bottom-padding,
  $material-texteditor-label-outside-font-size,
  $material-texteditor-label-outside-height,
);

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

@include dx-editor-buttons-container-material(
  $material-underlined-editor-button-height,
  $material-editor-custom-button-margin,
  $material-editor-custom-button-margin * 2,
  $material-filled-texteditor-spin-button-horizontal-padding,
  $material-filled-texteditor-spin-button-horizontal-padding,
  $material-button-vertical-padding,
);