@use "sass:math";
@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/icon_fonts" as *;
@use "../textEditor/colors" as *;
@use "../textEditor/sizes" as *;
@use "../../base/textBox";

// adduse
@use "../textEditor" as *;

@mixin dx-texteditor-search-icon($texteditor-icon-size) {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: $texteditor-icon-size;
  height: 100%;

  &::before {
    font-size: $texteditor-icon-container-size;
  }
}

.dx-searchbox {
  .dx-icon-search {
    @include dx-icon(search);

    color: $texteditor-placeholder-color;
  }

  &.dx-editor-underlined {
    .dx-icon-search {
      @include dx-texteditor-search-icon($textbox-search-icon-size);
    }

    .dx-texteditor-input,
    .dx-placeholder::before {
      padding-inline-start: $textbox-search-icon-size;
    }
  }

  &.dx-editor-filled,
  &.dx-editor-outlined {
    .dx-icon-search {
      @include dx-texteditor-search-icon($textbox-search-icon-size);
    }

    .dx-texteditor-input,
    .dx-placeholder::before {
      padding-inline-start: $textbox-search-icon-size;
    }
  }

  &.dx-state-disabled {
    .dx-icon-search {
      color: $base-foreground-disabled;
    }
  }
}

.dx-searchbar {
  padding-bottom: 5px;

  .dx-texteditor {
    margin: 0;
  }
}