@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-custom-button-margin: 1px;
$generic-texteditor-invalid-badge-size: $generic-invalid-badge-size + 2 * $generic-invalid-badge-horizontal-padding;

$generic-texteditor-label-transition:
  font-size 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
  transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms,
  top 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms;

@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-left: $generic-texteditor-invalid-badge-size;
    padding-right: 0;
  }
}

@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-focused.dx-state-hover {
    .dx-texteditor-label {
      color: $base-accent;
    }

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

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

.dx-texteditor-buttons-container {
  > .dx-button {
    margin: 1px $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-placeholder {
  color: $texteditor-placeholder-color;

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

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

      .dx-rtl & {
        padding-right: 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-texteditor-label {
  position: absolute;
  font-size: $generic-texteditor-label-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 {
      text-overflow: ellipsis;
      width: auto;
      max-width: 100%;
      overflow: hidden;
      display: block;
    }
  }

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

  .dx-rtl & {
    left: auto;
    right: 0;
  }
}

.dx-editor-filled {
  $input-vertical-diff: $generic-base-inline-borderedwidget-top-padding - 1;

  .dx-texteditor-label {
    .dx-label-after,
    .dx-label-before {
      display: block;
      box-sizing: border-box;
      min-width: $generic-base-inline-borderedwidget-horizontal-padding;
    }
  }

  &.dx-texteditor-with-label,
  &.dx-texteditor-with-floating-label {
    position: relative;

    .dx-texteditor-input,
    &.dx-lookup .dx-lookup-field {
      padding-top: $generic-base-inline-borderedwidget-top-padding + $input-vertical-diff;
      padding-bottom: $generic-base-inline-borderedwidget-bottom-padding - $input-vertical-diff;
    }

    .dx-texteditor-label {
      font-size: $generic-texteditor-label-size;
      height: $generic-base-inline-block-height;
      line-height: $generic-base-line-height;
      top: 0;
      margin-top: 0;
    }

    .dx-placeholder::before {
      padding-top: $generic-base-inline-borderedwidget-top-padding + $input-vertical-diff;
    }

    &.dx-textarea {
      .dx-texteditor-container {
        padding-top: $generic-base-inline-borderedwidget-top-padding + $input-vertical-diff;
      }

      .dx-placeholder::before,
      .dx-texteditor-input {
        padding-top: 0;
      }

      .dx-texteditor-label {
        top: 0;
      }
    }
  }

  &.dx-texteditor-with-floating-label {
    &.dx-texteditor-empty,
    &.dx-lookup-empty,
    &.dx-texteditor-empty.dx-state-readonly,
    &.dx-lookup-empty.dx-state-readonly {
      .dx-placeholder {
        display: none;
      }

      .dx-lookup-field {
        font-size: 0;
      }

      .dx-texteditor-label {
        transition: $generic-texteditor-label-transition;
        font-size: $generic-base-font-size;
        height: $generic-base-inline-block-height;
        line-height: $generic-base-line-height;
        top: 50%;
        margin-top: math.div(-$generic-base-inline-block-height, 2);
      }

      &.dx-textarea {
        .dx-texteditor-label {
          font-size: $generic-base-font-size;
          top: $generic-base-inline-borderedwidget-top-padding + $input-vertical-diff;
          margin-top: 0;
          height: $generic-base-inline-block-height;
          line-height: $generic-base-line-height;
        }

        .dx-placeholder {
          display: none;
        }
      }
    }

    &.dx-state-focused,
    &.dx-dropdowneditor-active,
    &.dx-textarea.dx-state-focused {
      .dx-placeholder {
        display: block;
      }

      .dx-lookup-field {
        font-size: $generic-base-font-size;
      }

      .dx-texteditor-label {
        font-size: $generic-texteditor-label-size;
        top: 0;
        margin-top: 0;
        height: $generic-base-inline-block-height;
        line-height: $generic-base-line-height;
      }

      &.dx-textarea {
        .dx-texteditor-label {
          top: 0;
        }
      }
    }
  }
}

.dx-editor-outlined {
  $border-width: 1px;
  $label-offset-y: math.div(($border-width + $generic-base-font-size), 2);
  $label-default-transform: translate(0, 0);

  @mixin dx-state($borderColor, $borderStyle) {
    border: 0;
    outline: none;

    .dx-texteditor-label {
      height: 100%;

      .dx-label {
        height: 100%;
        border-bottom: $border-width $borderStyle $borderColor;
        border-top: 0;
        border-left: $border-width $borderStyle transparent;
        margin-left: -1px;
        clip-path: inset(-$generic-texteditor-label-size -1px -1px 1px);
        padding: 0 2px;

        span {
          transform: translate(0, -$label-offset-y);
          font-size: $generic-texteditor-label-size;
          line-height: $generic-base-line-height;
          height: $generic-base-inline-block-height;
          margin-top: 0;
          top: 0;
        }
      }

      .dx-label-before {
        border-color: $borderColor;
        border-style: $borderStyle;
      }

      .dx-label-after {
        border-color: $borderColor;
        border-style: $borderStyle;
      }

      .dx-label-before,
      .dx-label-after {
        border-top: $border-width $borderStyle $borderColor;
        border-bottom: $border-width $borderStyle $borderColor;
        height: 100%;
      }
    }

    .dx-lookup-field {
      font-size: $generic-base-font-size;
    }

    &.dx-rtl {
      .dx-texteditor-label {
        .dx-label-before {
          border-right: $border-width $borderStyle $borderColor;
          border-radius: 0 $texteditor-border-radius $texteditor-border-radius 0;
          border-left: 0;
        }

        .dx-label-after {
          border-left: $border-width $borderStyle $borderColor;
          border-radius: $texteditor-border-radius 0 0 $texteditor-border-radius;
          border-right: 0;
        }
      }
    }
  }

  @mixin dx-state-empty($borderColor, $borderStyle) {
    border: 0;

    .dx-texteditor-label {
      height: 100%;

      .dx-label {
        border-bottom: $border-width $borderStyle $borderColor;
        border-top: $border-width $borderStyle $borderColor;

        span {
          transition: $generic-texteditor-label-transition;
          transform: $label-default-transform;
          font-size: $generic-base-font-size;
          top: 50%;
          height: $generic-base-inline-block-height;
          margin-top: math.div(- $generic-base-inline-block-height, 2);
          line-height: $generic-base-line-height;
        }
      }

      .dx-label-before {
        border-color: $borderColor;
        border-style: $borderStyle;
      }

      .dx-label-after {
        border-color: $borderColor;
        border-style: $borderStyle;
      }

      .dx-label-before,
      .dx-label-after {
        height: 100%;
        border-top: $border-width $borderStyle $borderColor;
        border-bottom: $border-width $borderStyle $borderColor;
      }
    }

    &.dx-textarea {
      .dx-texteditor-label .dx-label span {
        top: $generic-base-inline-borderedwidget-top-padding;
        margin-top: 0;
      }
    }

    .dx-lookup-field {
      font-size: 0;
    }

    .dx-placeholder {
      display: none;
    }
  }

  .dx-texteditor-label {
    top: 0;
    left: 0;
    right: 0;

    .dx-label {
      padding: 0;

      span {
        position: relative;
        font-size: $generic-base-font-size;
        top: 0;
        margin-top: 0;
      }
    }

    .dx-label-after,
    .dx-label-before {
      display: block;
      box-sizing: border-box;
    }

    .dx-label-before {
      min-width: $generic-base-inline-borderedwidget-horizontal-padding;
      border-radius: $texteditor-border-radius 0 0 $texteditor-border-radius;
    }

    .dx-label-after {
      min-width: $generic-base-inline-borderedwidget-horizontal-padding;
      flex-grow: 1;
      border-radius: 0 $texteditor-border-radius $texteditor-border-radius 0;
    }
  }

  &.dx-texteditor-with-label {
    &.dx-state-hover {
      @include dx-state($texteditor-hover-border-color, solid);

      &.dx-invalid {
        @include dx-state($texteditor-invalid-focused-border-color, solid);
      }
    }
  }

  &.dx-texteditor-with-floating-label {
    &.dx-texteditor-empty,
    &.dx-lookup-empty {
      @include dx-state-empty($texteditor-border-color, solid);

      &.dx-invalid {
        @include dx-state-empty($texteditor-invalid-faded-border-color, solid);
      }

      &.dx-state-hover {
        @include dx-state-empty($texteditor-hover-border-color, solid);

        &.dx-dropdowneditor-active {
          @include dx-state($texteditor-hover-border-color, solid);
        }

        &.dx-invalid {
          @include dx-state-empty($texteditor-invalid-focused-border-color, solid);
        }
      }

      &.dx-dropdowneditor-active {
        @include dx-state($texteditor-border-color, solid);
      }

      &.dx-state-readonly,
      &.dx-state-disabled {
        @include dx-state-empty($texteditor-border-color, dashed);

        &.dx-state-hover {
          @include dx-state-empty($texteditor-hover-border-color, dashed);
        }

        &.dx-state-focused,
        &.dx-state-focused.dx-state-hover,
        &.dx-textarea.dx-state-focused,
        &.dx-textarea.dx-state-focused.dx-state-hover {
          @include dx-state-empty($texteditor-focused-border-color, dashed);
        }
      }
    }
  }


  &.dx-texteditor-with-label,
  &.dx-texteditor-with-floating-label {
    border: 0;
    outline: none;
    position: relative;
    margin-top: $label-offset-y;

    &.dx-textarea {
      .dx-texteditor-input-container {
        padding-top: $generic-base-inline-borderedwidget-top-padding;

        .dx-texteditor-input {
          padding-top: 0;
        }
      }
    }

    &.dx-invalid {
      @include dx-state($texteditor-invalid-faded-border-color, solid);
    }

    &.dx-state-readonly.dx-state-hover {
      @include dx-state($texteditor-hover-border-color, dashed);
    }

    &.dx-state-readonly,
    &.dx-state-disabled {
      @include dx-state($texteditor-border-color, dashed);
    }

    .dx-texteditor-label {
      height: 100%;


      .dx-label {
        padding: 0 2px;
        border-bottom: 1px solid $texteditor-border-color;

        span {
          transform: translate(0, -$label-offset-y);
          font-size: $generic-texteditor-label-size;
          line-height: $generic-base-line-height;
          height: $generic-base-inline-block-height;
          top: 0;
          margin-top: 0;
        }
      }

      .dx-label-before {
        border-left-width: 1px;
        border-right-width: 0;
        border-color: $texteditor-border-color;
        border-style: solid;
      }

      .dx-label-after {
        border-right-width: 1px;
        border-left-width: 0;
        border-color: $texteditor-border-color;
        border-style: solid;
      }

      .dx-label-before,
      .dx-label-after {
        height: 100%;
        border-top: 1px solid $texteditor-border-color;
        border-bottom: 1px solid $texteditor-border-color;
      }
    }

    &.dx-rtl,
    .dx-rtl & {
      .dx-texteditor-label {
        .dx-label-before {
          border-right-width: 1px;
          border-radius: 0 $texteditor-border-radius $texteditor-border-radius 0;
          border-left-width: 0;
        }

        .dx-label-after {
          border-left-width: 1px;
          border-radius: $texteditor-border-radius 0 0 $texteditor-border-radius;
          border-right-width: 0;
        }
      }
    }

    &.dx-state-hover {
      @include dx-state($texteditor-hover-border-color, solid);

      &.dx-invalid {
        @include dx-state($texteditor-invalid-focused-border-color, solid);
      }
    }

    &.dx-textarea.dx-state-focused,
    &.dx-textarea.dx-state-focused.dx-state-hover,
    &.dx-dropdowneditor-active.dx-state-focused,
    &.dx-dropdowneditor-active.dx-state-focused.dx-state-hover,
    &.dx-state-focused,
    &.dx-state-focused.dx-state-hover {
      @include dx-state($texteditor-focused-border-color, solid);

      &.dx-invalid {
        @include dx-state($texteditor-invalid-focused-border-color, solid);
      }

      .dx-placeholder {
        display: block;
      }
    }
  }
}

.dx-editor-underlined {
  $input-vertical-diff: 4px;
  $input-top-padding: $generic-base-inline-borderedwidget-top-padding + $input-vertical-diff;
  $label-transform: translate(0, 0);

  &.dx-texteditor-with-label,
  &.dx-texteditor-with-floating-label {
    position: relative;

    .dx-texteditor-label {
      transform: $label-transform;
      top: 0;
      margin-top: 0;
      height: $generic-base-inline-block-height;
      line-height: $generic-base-line-height;
    }

    .dx-placeholder::before {
      padding-top: $input-top-padding;
    }

    .dx-texteditor-input,
    &.dx-lookup .dx-lookup-field {
      padding-top: $input-top-padding;
      padding-bottom: $generic-base-inline-borderedwidget-bottom-padding - $input-vertical-diff;
    }

    &.dx-textarea {
      .dx-texteditor-container {
        padding-top: $input-top-padding;
      }

      .dx-placeholder::before,
      .dx-texteditor-input {
        padding-top: 0;
      }

      .dx-texteditor-label {
        top: 0;
      }
    }
  }

  &.dx-texteditor-with-floating-label {
    &.dx-texteditor-empty,
    &.dx-lookup-empty,
    &.dx-texteditor-empty.dx-state-readonly,
    &.dx-lookup-empty.dx-state-readonly {
      .dx-placeholder {
        display: none;
      }

      .dx-lookup-field {
        font-size: 0;
      }

      .dx-texteditor-label {
        transition: $generic-texteditor-label-transition;
        transform: translate(0, 0);
        font-size: $generic-base-font-size;
        top: 50%;
        height: $generic-base-inline-block-height;
        margin-top: math.div(-$generic-base-inline-block-height, 2);
        line-height: $generic-base-line-height;
      }

      &.dx-textarea {
        .dx-texteditor-label {
          top: $input-top-padding;
          margin-top: 0;
          transform: translate(0, 0);
          font-size: $generic-base-font-size;
          line-height: $generic-base-line-height;
          height: $generic-base-inline-block-height;
        }

        .dx-placeholder {
          display: none;
        }
      }
    }

    &.dx-state-focused,
    &.dx-dropdowneditor-active,
    &.dx-textarea.dx-state-focused {
      .dx-placeholder {
        display: block;
      }

      .dx-lookup-field {
        font-size: $generic-base-font-size;
      }

      .dx-texteditor-label {
        transform: $label-transform;
        font-size: $generic-texteditor-label-size;
        top: 0;
        margin-top: 0;
        height: $generic-base-inline-block-height;
        line-height: $generic-base-line-height;
      }

      &.dx-textarea {
        .dx-texteditor-label {
          top: 0;
        }
      }
    }
  }

  &.dx-texteditor-with-before-buttons {
    .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-texteditor-label {
      .dx-label {
        padding-left: $generic-base-inline-borderedwidget-horizontal-padding;
      }
    }

    &.dx-rtl {
      .dx-texteditor-label {
        .dx-label {
          padding-left: 0;
          padding-right: $generic-base-inline-borderedwidget-horizontal-padding;
        }
      }
    }

    .dx-texteditor-buttons-container {
      > .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-texteditor-custom-button-margin;
            margin-right: 0;
          }

          &:last-child {
            margin-left: 0;
            margin-right: $generic-texteditor-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-texteditor-custom-button-margin;
            margin-right: $generic-texteditor-custom-button-margin;
          }

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

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

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

          &:last-child {
            margin-left: $generic-texteditor-custom-button-margin;
            margin-right: $generic-texteditor-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;
    }
  }
}