.search-suggest {
  &__combobox {
    position: relative;
  }

  &__input,
  &__region-input {
    background-clip: border-box;
  }

  &__input {
    padding-right: 4.8rem;
  }

  &__clear-button,
  &__search-button {
    position: absolute;
    top: 50%;
    z-index: 1;
    border: none;
    background-color: transparent;
    transition: none;
  }

  &__clear-button {
    right: 2rem;
    font-size: 1.25rem;
    line-height: 1;
    transform: translate(-100%, -50%);
    padding: 0 5px;
    color: currentColor;
  }

  &__search-button {
    right: 0;
    transform: translateY(-50%);
    transition: none;

    .icon {
      height: 1.5rem;
      width: 1.5rem;
      fill: $color-blue-light;
    }
  }

  &__listbox {
    position: absolute;
    z-index: 9999;
    margin-top: 1px;
    width: 100%;
    background-color: $color-white;
    box-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.3);
    list-style: none;
    padding: 0;

    &-item,
    &-region-item {
      padding: 0.5rem 0.75rem;
      line-height: 1.2;
      border-bottom: 1px solid $color-grey-light-2;
      display: flex;
      justify-content: space-between;

      &:last-child {
        border: none;
      }

      &.active {
        background-color: $color-hover;
        cursor: pointer;
      }
    }

    &-region-item {
      flex-direction: column;
    }

    &-title {
      padding-right: 15px;
      color: $color-black;
    }

    &-area {
      flex: 0 0 100px;
    }

    @include media-breakpoint-down(md) {
      &-item {
        flex-direction: column;
      }

      &-title {
        padding-right: 0;
      }

      &-area {
        flex-basis: auto;
        padding-top: 5px;
      }
    }
  }
}

.search-suggest-wrapper {
  .search-suggest-tooltip-wrapper .info-tooltip {
    display: inline;
    @include media-breakpoint-up(md) {
      display: none;
    }
  }
  .search-suggest-tooltip-wrapper {
    .search-suggest__combobox {
      .info-tooltip {
        display: none;

        @include media-breakpoint-up(md) {
          position: absolute;
          display: block;
          top: 50%;
          transform: translate(0, -50%);
          right: -30px;
          z-index: 10;
        }
      }
    }
  }
}

fieldset ~ app-info-tooltip {
  display: block;
  padding-top: 0.75rem;
}
