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

// adduse


$generic-dropdowneditor-container-button-size: $generic-base-inline-borderedwidget-inner-size;
$generic-dropdowneditor-button-offset: $generic-base-border-width;

$generic-dropdowneditor-button-size:
  $generic-dropdowneditor-container-button-size -
  $generic-dropdowneditor-button-offset * 2;

$generic-dropdowneditor-invalid-badge-offset:
  $generic-dropdowneditor-container-button-size +
  $generic-invalid-badge-halfhorizontal-padding;

$generic-dropdowneditor-invalid-badge-with-clear-offset: $generic-dropdowneditor-container-button-size * 2;

$generic-dropdowneditor-invalid-badge-size: $generic-invalid-badge-size + $generic-invalid-badge-horizontal-padding;


@mixin dx-dropdowneditor-button-icon() {
  width: $generic-dropdowneditor-button-size;
  height: 100%;

  @include dx-icon-font-centered-sizing($generic-base-icon-size);

  border-radius: $dropdowneditor-icon-border-radius;
}

.dx-dropdowneditor-button {
  width: $generic-dropdowneditor-container-button-size;
  min-width: $generic-dropdowneditor-container-button-size;
  padding: $generic-dropdowneditor-button-offset;
  border-radius: $button-border-radius;

  &.dx-button-mode-outlined,
  &.dx-button-mode-contained,
  &.dx-button-mode-text {
    background: transparent;
  }

  .dx-state-readonly & {
    .dx-dropdowneditor-icon {
      opacity: 1;
    }
  }
}

.dx-dropdowneditor-icon {
  border: $generic-base-border-width solid transparent;
  color: $dropdowneditor-icon-color;

  @include dx-icon(spindown);
  @include dx-dropdowneditor-button-icon();
}

.dx-dropdowneditor-input-wrapper {
  .dx-texteditor {
    &.dx-editor-outlined,
    &.dx-editor-filled,
    &.dx-editor-underlined {
      border: none;
      background: transparent;
    }

    &.dx-texteditor-with-floating-label,
    &.dx-texteditor-with-label {
      .dx-texteditor-label {
        .dx-label-before,
        .dx-label,
        .dx-label-after {
          border: none;
        }
      }
    }
  }
}

.dx-dropdowneditor-button-visible {
  .dx-texteditor-input {
    padding-inline-end: 0;
  }
}

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

  .dx-timeview {
    .dx-texteditor-input {
      padding-inline-end: 0;
    }
  }
}

.dx-invalid,
.dx-valid,
.dx-validation-pending {
  @include invalid-dropdowneditor-input-padding();
}

.dx-dropdowneditor {
  &.dx-state-hover:not(.dx-custom-button-hovered),
  &.dx-state-active {
    .dx-dropdowneditor-icon {
      background-color: $dropdowneditor-button-hover-bg;
      border-color: $dropdowneditor-button-hover-border-color;

      @at-root #{selector-append(".dx-editor-filled", &)} {
        background-color: $dropdowneditor-filled-button-hover-bg;
      }
    }
  }
}

.dx-dropdowneditor.dx-dropdowneditor-active,
.dx-dropdowneditor-button.dx-state-active {
  .dx-dropdowneditor-icon {
    background-color: $dropdowneditor-button-active-bg;
    border-color: $dropdowneditor-button-active-border-color;
    color: $dropdowneditor-icon-active-color;
    opacity: 1;

    @at-root #{selector-append(".dx-editor-filled", &)},
    .dx-editor-filled & {
      background-color: $dropdowneditor-filled-button-active-bg;
    }
  }
}

@mixin texteditor-container-offset() {
  .dx-texteditor-container {
    &::after {
      inset-inline-end: $generic-dropdowneditor-invalid-badge-offset;
    }
  }

  &.dx-show-clear-button:not(.dx-texteditor-empty) {
    .dx-texteditor-container {
      &::after {
        inset-inline-end: $generic-dropdowneditor-invalid-badge-with-clear-offset;
      }
    }
  }
}

.dx-invalid.dx-dropdowneditor {
  @include texteditor-container-offset();

  &.dx-editor-filled {
    .dx-dropdowneditor-icon {
      @at-root #{selector-append(".dx-state-hover", &)} {
        background-color: $dropdowneditor-filled-button-invalid-hover-bg;
      }

      @at-root #{selector-append(".dx-dropdowneditor-active", &)} {
        background-color: $dropdowneditor-filled-button-invalid-active-bg;
      }

      @at-root #{selector-append(".dx-state-active", &)} {
        background-color: $dropdowneditor-filled-button-invalid-active-bg;
      }
    }
  }
}

.dx-valid.dx-dropdowneditor {
  @include texteditor-container-offset();
}