.Search--ios {
  overflow: hidden;
  font-weight: normal;
  transform: translate3d(0, 0, 0);
  }

  .Search--ios .Search__in {
    position: relative;
    }

    .Search--ios .Search__width {
      height: 32px;
      white-space: nowrap;
      color: transparent;
      width: 10000px;
      }

    .Search--ios .Search__control {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: absolute;
      left: 0;
      top: 0;
      width: calc(100% - 1px);
      height: 100%;
      border-radius: 16px;
      }

      .Search--ios .Search__input {
        border: none;
        margin: 0;
        height: 32px;
        position: relative;
        padding: 0 22px 0 34px;
        box-sizing: border-box;
        font-size: 15px;
        outline: none;
        border-radius: 16px;
        max-width: 100%;
        flex-grow: 1;
        min-width: 0;
        background-color: transparent;
        z-index: 2;
        font-family: var(--font-ios);
        }

      .Search--ios.Search--has-after .Search__input {
        border-radius: 16px 0 0 16px;
        padding-right: 32px;
        }

      .Search--ios .Search__after-width {
        font-size: 17px;
        height: 32px;
        line-height: 32px;
        padding-left: 12px;
        padding-right: 4px;
        }

      .Search--ios .Search__placeholder {
        position: absolute;
        left: 0;
        transform: translate(50%);
        transition: transform .3s var(--ios-easing);
        width: 100%;
        cursor: text;
        opacity: .5;
        z-index: 1;
        text-align: left;
        display: block;
        height: 32px;
        font-size: 0;
        }

      .Search--ios.Search--focused .Search__placeholder,
      .Search--ios.Search--has-value .Search__placeholder {
        transform: translate(0);
        }

        .Search--ios .Search__placeholder-in {
          transform: translate(-50%);
          transition: transform .3s var(--ios-easing);
          height: 32px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          }

        .Search--ios.Search--focused .Search__placeholder .Search__placeholder-in,
        .Search--ios.Search--has-value .Search__placeholder .Search__placeholder-in {
          transform: translate(12px);
          }

          .Search--ios .Search__placeholder-text {
            margin-left: 6px;
            line-height: 32px;
            font-size: 15px;
            }

          .Search--ios.Search--has-value .Search__placeholder-text {
            opacity: 0;
            }

    .Search--ios .Search__after {
      position: absolute;
      left: 100%;
      top: 0;
      line-height: 32px;
      z-index: 2;
      transform: translate(0);
      transition: transform .3s var(--ios-easing);
      cursor: default;
      }

    .Search--ios.Search--focused .Search__after,
    .Search--ios.Search--has-value .Search__after {
      transform: translate(-100%);
      }

      .Search--ios .Search__after::before {
        position: absolute;
        right: calc(100% - 1px);
        display: block;
        height: 100%;
        width: 33px;
        content: '';
        }

      .Search--ios .Search__after-in {
        position: relative;
        z-index: 2;
        cursor: pointer;
        font-size: 17px;
        padding-left: 12px;
        padding-right: 4px;
        }

      .Search--ios .Search__after::after {
        position: absolute;
        right: 100%;
        display: block;
        height: 100%;
        width: 33px;
        content: '';
        top: 0;
        border-radius: 0 16px 16px 0;
        cursor: text;
        }

/*
  Themes
 */

/*
  default
 */
.Search--ios.Search--default {
  background: var(--search_bar_background);
  padding: 8px;
  }

.Search--ios.Search--default .Search__control {
  background-color: var(--search_bar_field_background);
  }

.Search--ios.Search--default .Search__input {
  color: var(--text_primary);
  }

.Search--ios.Search--default .Search__placeholder {
  color: var(--search_bar_field_tint);
  }

.Search--ios.Search--default .Search__after-width {
  background: var(--search_bar_field_background);
  color: var(--search_bar_field_background);
  }

.Search--ios.Search--default .Search__after {
  background: var(--search_bar_background);
  color: var(--accent);
  }

.Search--ios.Search--default .Search__after::after {
  background-color: var(--search_bar_field_background);
  }

.Search--ios.Search--default .Search__after::before {
  background-color: var(--search_bar_background);
  }

/* Очень плохой хак для новых тем. В них заливка поиска прозрачная, а при текущей его реализации
 * прозрачность все ломает. Нужно его переделать и убрать хаки.
 */
[scheme="bright_light"] .Panel--ios.Panel--tm-gray .Search--default .Search__after::before,
[scheme="bright_light"] .Panel--ios.Panel--tm-gray .Search--default .Search__after,
[scheme="bright_light"] .Panel--ios.Panel--tm-gray .Search--default {
  background-color: var(--background_page);
  }

[scheme="bright_light"] .Panel--ios.Panel--tm-white .Search--default .Search__after::before,
[scheme="bright_light"] .Panel--ios.Panel--tm-white .Search--default .Search__after,
[scheme="bright_light"] .Panel--ios.Panel--tm-white .Search--default {
  background-color: var(--background_content);
  }

[scheme="space_gray"] .Panel--ios.Panel--tm-gray .Search--default .Search__after::before,
[scheme="space_gray"] .Panel--ios.Panel--tm-gray .Search--default .Search__after,
[scheme="space_gray"] .Panel--ios.Panel--tm-gray .Search--default {
  background-color: var(--background_page);
  }

[scheme="space_gray"] .Panel--ios.Panel--tm-white .Search--default .Search__after::before,
[scheme="space_gray"] .Panel--ios.Panel--tm-white .Search--default .Search__after,
[scheme="space_gray"] .Panel--ios.Panel--tm-white .Search--default {
  background-color: var(--background_content);
  }

.Search--ios.Search--default::after {
  position: absolute;
  width: 100%;
  z-index: 1;
  height: 1px;
  content: '';
  left: 0;
  bottom: 0;
  background: var(--separator_common);
  transform-origin: center bottom;
  }

@media (min-resolution: 2dppx) {
  .Search--ios.Search--default::after {
    transform: scaleY(.5);
    }
  }

@media (min-resolution: 3dppx) {
  .Search--ios.Search--default::after {
    transform: scaleY(.33);
    }
  }

/*
  header
 */
.Search--ios.Search--header {
  background: var(--header_background);
  padding-top: 6px;
  }

.Search--ios.Search--header .Search__control {
  background-color: var(--header_search_field_background);
  }

.Search--ios.Search--header .Search__input {
  color: var(--header_tint);
  }

.Search--ios.Search--header .Search__placeholder {
  color: var(--header_search_field_tint);
  }

.Search--ios.Search--header .Search__after-width {
  background: var(--header_search_field_background);
  color: var(--header_search_field_background);
  }

.Search--ios.Search--header .Search__after {
  background: var(--header_background);
  color: var(--header_tint);
  }

.Search--ios.Search--header .Search__after::after {
  background-color: var(--header_search_field_background);
  }

.Search--ios.Search--header .Search__after::before {
  background-color: var(--header_background);
  }