.host {
  box-sizing: content-box;
  display: flex;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;

  --vkui_internal--search_height: var(--vkui--size_search_height--regular);
  --vkui_internal--search_shift_direction: 1;
}

.rtl {
  --vkui_internal--search_shift_direction: -1;
}

.withPadding {
  padding-block: 8px;
  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
}

/*
  sizeY-compact
 */

.sizeYCompact {
  --vkui_internal--search_height: var(--vkui--size_search_height--compact);
}

@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
  .sizeYNone {
    --vkui_internal--search_height: var(--vkui--size_search_height--compact);
  }
}

.field {
  position: relative;
  display: flex;
  flex-grow: 2;
  flex-basis: 0%;
  /**
   * Костыль для PanelHeader. Необходимо для растягивания на всю ширину.
   */
  inline-size: 10000px;
  block-size: var(--vkui_internal--search_height);
  overflow: hidden;
  background-color: var(--vkui--color_search_field_background);
  border-radius: var(--vkui--size_border_radius--regular);
}

.field:hover {
  background-color: var(--vkui--color_search_field_background--hover);
}

.field:active {
  background-color: var(--vkui--color_search_field_background--active);
}

.label {
  position: absolute;
  inset: 0;
  cursor: text;
  opacity: 0;
}

.input {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  inline-size: calc(100% - 1px);
  block-size: 100%;
  -webkit-padding-start: 12px;
          padding-inline-start: 12px;
  color: var(--vkui--color_icon_medium);
  border-radius: inherit;
}

.nativeInput {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  flex-grow: 1;
  inline-size: -webkit-fill-available;
  inline-size: -moz-available;
  inline-size: stretch; /* автопрефиксер добавит фолбеки https://caniuse.com/mdn-css_properties_width_stretch */
  min-inline-size: 0;
  max-inline-size: 100%;
  block-size: 100%;
  padding: 0;
  -webkit-padding-start: 36px;
          padding-inline-start: 36px;
  margin: 0;
  color: var(--vkui--color_text_primary);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; /* не используем textfield из-за бага в iOS 15.1 http://www.openradar.me/FB9744107 */
  background-color: transparent;
  border: 0;
  border-radius: inherit;
}

.nativeInput::-webkit-search-decoration,
.nativeInput::-webkit-search-cancel-button,
.nativeInput::-webkit-search-results-button,
.nativeInput::-webkit-search-results-decoration {
  display: none;
}

.nativeInput:focus {
  outline: var(--vkui_internal--outline-reset);
}

.hasAfter .nativeInput {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: var(--vkui--opacity_disable_accessibility);
}

.nativeInput:disabled {
  opacity: var(--vkui--opacity_disable_accessibility);
}

.nativeInput::placeholder {
  color: var(--vkui--color_text_secondary);
  /* Для Firefox */
  opacity: 1;
}

.nativeInput:disabled::placeholder {
  color: var(--vkui--color_text_secondary);
}

.controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vkui--color_icon_secondary);
  /* Используем translate3d, чтобы поправить дергание при наведении в Safari */
  transform: translate3d(calc(var(--vkui_internal--search_shift_direction) * 100%), 0, 0);
  transition: transform 0.3s var(--vkui--animation_easing_platform);

  --vkui_internal--search_icon_size: calc(var(--vkui_internal--search_height) + 4px);
}

.hasIcon .controls {
  /* Исключаем параметр icon из расчёта, чтобы он оставался видимым */
  transform: translate3d(
    calc(
      var(--vkui_internal--search_shift_direction) *
      calc(100% - var(--vkui_internal--search_icon_size))
    ),
    0,
    0
  );
}

.hasValue .controls {
  transform: translate3d(0, 0, 0);
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--vkui_internal--search_icon_size);
  block-size: 100%;
  border-radius: var(--vkui--size_border_radius--regular);
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

.icon :global(.vkuiIcon) {
  padding: 0;
}

.after {
  position: relative;
  display: flex;
  flex-grow: 0;
  flex-basis: 0%;
  min-inline-size: 0;
  max-inline-size: -webkit-min-content;
  max-inline-size: -moz-min-content;
  max-inline-size: min-content;
  pointer-events: none;
  transition: flex-grow 0.3s var(--vkui--animation_easing_platform);
}

.focused .after,
.hasValue .after {
  flex-grow: 1;
  pointer-events: initial;
}

.after::before,
.after::after {
  display: block;
  flex-shrink: 0;
  inline-size: 4px;
  block-size: 100%;
  content: '';
}

.withPadding .after::after {
  -webkit-margin-end: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
          margin-inline-end: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
}

.afterTextClip {
  display: block;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.findButton {
  inline-size: initial;
  min-inline-size: initial;
  max-inline-size: initial;
}

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

:global(.vkuiInternalGroup--mode-plain) .host {
  -webkit-padding-before: 4px;
          padding-block-start: 4px;
}