@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 *;

$textbox-search-icon-right-padding: math.div($material-filled-texteditor-input-horizontal-padding, 2);
$textbox-standard-search-icon-size:
  $material-texteditor-icon-container-size +
  $material-base-standard-texteditor-input-horizontal-padding +
  $textbox-search-icon-right-padding;
$textbox-filled-search-icon-size:
  $material-texteditor-icon-container-size +
  $material-filled-texteditor-input-horizontal-padding +
  $textbox-search-icon-right-padding;

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

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

  padding-inline-start: $texteditor-padding;
  padding-inline-end: $textbox-search-icon-right-padding;
}

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

    &::before {
      color: $textbox-search-icon-color;
    }

    color: $texteditor-placeholder-color;
  }

  &.dx-editor-underlined {
    .dx-icon-search {
      @include dx-texteditor-search-icon($textbox-standard-search-icon-size, $material-base-standard-texteditor-input-horizontal-padding);
    }

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

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

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

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

  .dx-texteditor {
    margin: 0;
  }
}